добавление контроллера к вкладкам в Angular JS

Question

Итак, я использую этот пример https://jsfiddle.net/jccrosby/eRGT8/ для создания спам-панели с вкладками. Пока это работает, но когда я пытаюсь добавить отдельный контроллер, объединяющий http://jsfiddle.net/mjaric/pj5br/, как показано ниже, я теряю даже исходные вкладки.

<div ng-app="TabsApp"> 
<div id="tabs" ng-controller="TabsCtrl"> 
    <ul> 
     <li ng-repeat="tab in tabs" 
      ng-class="{active:isActiveTab(tab.url)}" 
      ng-click="onClickTab(tab)">{{tab.title}}</li> 
    </ul> 
    <div id="mainView"> 
     <div ng-include="currentTab"></div> 
    </div> 
</div> 
<script type="text/ng-template" id="one.tpl.html"> 
    <div id="viewOne" > 
     <h1>View One</h1> 
     <p>1.</p> 
    </div> 
</script> 

<script type="text/ng-template" id="two.tpl.html"> 
    <div id="viewTwo" ng-controller="PeopleCtrl"> 
     <h1>View Two</h1> 
      <p>Click <a ng-click="loadPeople()">here</a> to load</p> 
    <table> 
    <tr> 
     <th>Id</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
    </tr> 
    <tr ng-repeat="person in people"> 
     <td>{{person.id}}</td> 
     <td>{{person.firstName}}</td> 
     <td>{{person.lastName}}</td> 
    </tr> 
    </table> 
    </div> 
</script> 

<script type="text/ng-template" id="three.tpl.html"> 
    <div id="viewThree"> 
     <h1>View Three</h1> 
     <p>3.</p> 
    </div> 
</script> 

JS файл

var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([ 
{ 
id: 1, 
firstName: "Peter", 
lastName: "Jhons"}, 
{ 
id: 2, 
firstName: "David", 
lastName: "Bowie"} 
])); 

var app = angular.module('TabsApp', []); 
app.controller('TabsCtrl', ['$scope', function ($scope) { 
$scope.tabs = [{ 
     title: 'One', 
     url: 'one.tpl.html' 
    }, { 
     title: 'Two', 
     url: 'two.tpl.html' 
    }, { 
     title: 'Three', 
     url: 'three.tpl.html' 
}]; 

$scope.currentTab = 'one.tpl.html'; 

$scope.onClickTab = function (tab) { 
    $scope.currentTab = tab.url; 
} 

$scope.isActiveTab = function(tabUrl) { 
    return tabUrl == $scope.currentTab; 
} 
}]); 
app.controller('PeopleCtrl',['$scope','$http',function ($scope, $http) { 

$scope.people = []; 

$scope.loadPeople = function() { 
    var httpRequest = $http({ 
     method: 'POST', 
     url: '/echo/json/', 
     data: mockDataForThisTest 

    }).success(function(data, status) { 
     $scope.people = data; 
    }); 

}; 

}]}; 

выход, как: ниже показывает только 1 таб и ничего

{{tab.title}} 

Так что я нужен 2-й пример работает внутри вкладки 2 , новый для Angular js, так что попробуйте. Я не уверен, что я делаю неправильно. Вот пример:

https://jsfiddle.net/gen14rp5/

Answer 1

угловой JS библиотека не добавляется просто добавить ссылку на библиотеку для скрипки