I know that ng-view is better for this type of problem, but I'm already using it to dynamically load an auth vs. dashboard template, so I'm stuck using ng-includes.

Basically, once I load the dashboard template with ng-view, I have a tab control that should change the ng-include depending on which tab is active. However, I can not for my life figure out how to change the ng-include depending on which tab is selected. As an FYI, super new to Angular, mostly a JQuery guy, (and yes, I know I should avoid using JQuery w/ Angular so that I can master Angular, but I'm at my wits end with this thing).

Here's my tab control:

myApp.controller('TabsCtrl', ['$scope', function ($scope) {

  $scope.tabs = [{

      url: '#/dashboard/one'

    }, {

      url: '#/dashboard/two'

    }

  }];



  $scope.activeTab = '#/dashboard/one';



  $scope.onClickTab = function(tab) {

    $scope.activeTab = tab.url;

  }



  $scope.isActiveTab = function(tabUrl) {

    return tabUrl == $scope.activeTab;

  }



  $scope.dashboard.url = {};

  if($scope.activeTab === '#/dashboard/one') {

    $('ng-include').attr('src', 'dashboard/one.html');

  }

  if($scope.activeTab === '#/dashboard/two') {

    $('ng-include').attr('src', 'dashboard/two.html');

  }

  }]);

And here's the html:

<div id=wrapper ng-controller=TabsCtrl>

  <div id=sidebar-wrapper>

    <ul class=sidebar-nav>

      <li ng-repeat=tab in tabs 

          ng-class={active_tab:isActiveTab(tab.url)} 

          ng-click=onClickTab(tab)>

        <a href={{tab.url}}>

          <div class=tab-icon>

            <i ng-class=tab.icon></i>

          </div>

          <div class=tab-label>{{tab.label}}</div>

        </a>

      </li>

    </ul>

  </div>

  <div id=page-content-wrapper>

    <div class=page-content>

      <ng-include src=></ng-include>

    </div>

  </div>

</div>

@hasH: I tried to do something along these lines, but $scope.dashboardPath.url didn't seem to be the actual src=dashboardPath.url.

var path = currentPath;//Retrieve it.

$scope.dashboardPath={};

if(path==='/dashboard/one')

    $scope.dashboardPath.url='pageOne.html';

if(path==='/dashboard/two')

    $scope.dashboardPath.url='pageTwo.html';