html - Tab navigation not working in AngularJS app -

it's 3:40am , i'm going give trying tonight.

the tabs not update page outside of navigation area.

the panelcontroller looks this:-

app.controller('panelcontroller', function($scope) {      $scope.tab = 1;      $scope.selecttab = function(settab) {          $scope.tab = settab;      };      $scope.isselected = function(checktab) {          return $scope.tab === checktab;      };  }); 

and nav pane looks this:-

<div class="navbar-collapse collapse" ng-controller="panelcontroller">   <ul class="nav navbar-nav navbar-right">      <li ng-class="{ active:isselected(1) }">       <a href ng-click="selecttab(1)">blog</a>     </li>     <li ng-class="{ active:isselected(2) }">       <a href ng-click="selecttab(2)">about{{tab}}</a>     </li>     <li ng-class="{ active:isselected(3) }">       <a href ng-click="selecttab(3)">contact</a>     </li>    </ul> </div> 

and placeholder html 2 tabs follows:-

    <div ng-controller="panelcontroller">       <div ng-show="isselected(1)">         <p>hello</p>       </div>        <div ng-show="isselected(2)">         <p>please work</p>       </div>     </div> 

as can see, {{tab}} next 'about' in navbar updating in view click tabs, active class. when place {{tab}} expression outside of navbar isn't updating whenever it's clicked. related scope of variable, using panelcontroller on parent of both nav , main area.

i can't see i'm doing wrong.

i'd appreciate fresh pair of eyes -- i've already , more graciously accepted.

the problem diagnosis simple, 2 controllers means 2 instances each have own scope

you need use service or events have them communicate together