Template

by Rob Rothe

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="app" class="container">
   <div ng-controller="Controller as ctrl">
      <ul>
         <li ng-repeat="student in ctrl.students">{{student.name}}</li>
      </ul>
   </div>
</div>

JavaScript

angular
   .module('app', [])
   .controller('Controller', Controller)
   .factory('StudentsService', StudentsService);

function StudentsService($http) {
   var service = {
      getStudents: getStudents
   };

   return service;

   function getStudents(fname) {
      return $http.get('students.php', {
         params: {
            fname: fname
         }
      }).then(function(response) {
         return response.data;
      });
   }
}

function Controller(StudentsService) {
   var vm = this;

   StudentsService.getStudents('Ro').then(function(data) {
      vm.students = data.students;
   });
}