AngularJS ng-repeat not working

Question

I have a very simple AngularJS application where I am trying to display a list of records.

My main index.html code is:

<div id="employeeApp" ng-app='employeeApp' ng-controller='EmployeeController'>
    <div ng-view=""></div>
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script> 
<script src="js/controller.js"></script>    

The list.html partial view looks like:

div id="listView">
<ul>
    <li name="DataContainer" ng-repeat='employee in employees'>
        <table>
            <tr><td>
                <img ng-src='{{employee.image}}'></img>
            </td></tr>
            <tr><td align="center">
                <span name="Name" class="outputData">
                    <a href="#" ng-click="getEmployeeDetail(employee.id)"><div>{{employee.name}}</div><div>{{employee.title}}</div></a>
                </span>
            </td></tr>
        </table>
    </li>
</ul>

the controller.js code looks like:

var app = angular.module('employeeApp', ['ngRoute']);
app.service('EmployeeService', ['$http', function ($http){

this.getEmployees = function () 
{
    return $http.get(baseURL);
};

this.getEmployee = function (id) 
{
    return $http.get(baseURL + '/' + id);
};}]);

app.config(['$routeProvider', function($routeProvider){    $routeProvider
  .when('/employees', {
      templateUrl: 'partials/list.html'
  })
.when('/employees/:employeeId', {
      templateUrl: 'partials/edit.html'
})
.otherwise({ // default
      redirectTo: '/employees'
});}]);

app.controller('EmployeeController', ['$scope', 'EmployeeService', function ($scope, EmployeeService) {
 $scope.employees = EmployeeService.getEmployees();
 console.log($scope.employees);

 $scope.getEmployeeDetail = function (id) 
 {
    $scope.employeeDetail =  EmployeeService.getEmployee(id);
    console.log($scope.employeeDetail);
 }}]);

My REST service returns me the data that I can see in the browser console but my list is not rendering in the page.

the routing seems to be working fine since I can see list.html getting loaded. However for some reason the the list is showing 2 empty records.

I am wondering i have some basic error either in my html or controller that is breaking the code.

Answer 1

you controller calling service bit seems strange to me, since EmployeeService returns $http.get(baseURL), I would change the controller code to this:

app.controller('EmployeeController', ['$scope', 'EmployeeService', function ($scope, EmployeeService) {
 EmployeeService.getEmployees().success(function(data){
 $scope.employees = data;
 console.log($scope.employees);
});