AngularJs - for javascript session 05

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, usersSrv) {
  $scope.name = 'Users Table';
   $scope.userList = [];
   usersSrv.getUsers().then(function(users){
    $scope.userList = users; 
   })
 
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
    <script src="users.service.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   
    <div>
      <h2>{{name}}</h2>
      <div  ng-if="userList.length===0">No Users Yet</div>
      <table ng-if="userList.length" >
        <tr><th>First Name</th><th>Last Name</th></tr>
        <!-- Look here -->
        <tr ng-repeat="user in userList">
         <td>
           {{user.firstName}}
         </td>
         <td>
           {{user.lastName}}
         </td>         
        </tr>
      </table>
    </div>
  </body>

</html>

/* Put your css in here */

[{
  "firstName": "Vasia",
  "lastName": "Kozlov"
},{
  "firstName": "Yosef",
  "lastName": "Stalin"
}]

app.factory('usersSrv', function($http, $q) {
  function get(){
      var defer = $q.defer();
      $http.get('./users.json').success(function(data){
        defer.resolve(data)
      });
      return defer.promise;
  }
  
  var service = { 
    getUsers: get
  }

  return service;
});