Angular Separate Controllers 3 Lists

by TheFiddler

HTML

<div class="mainContainer" ng-app="JobApp">
    <div data-ng-controller="ViewCtrl">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>University</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="candidate in candidates | filter:status | orderBy:'name' | limitTo: 3">
                    <td>{{candidate.id}}</td>
                    <td>{{candidate.name}}</td>
                    <td>{{candidate.school}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>


  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
  <script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>

JavaScript

var jobapp = angular.module('JobApp', ['ui.sortable']);

jobapp.service("AllCandidatesByJobService", function ($http, $q) {
    var deferred = $q.defer();

    $http.get('pathto.json').then(function (data) {
        deferred.resolve(data);
    });

    this.getCandidates = function () {
        return deferred.promise;
    }
})
    .controller("ViewCtrl", function ($scope, AllCandidatesByJobService) {
    var promise = AllCandidatesByJobService.getCandidates();
    promise.then(function (data) {
        $scope.candidates = data.data;
        console.log($scope.candidates);
    });
})