Angular Controller Is Not Binding Service Object Property Ng-repeat

I'm having trouble displaying the items of an array returned from a service in the template. I believe I'm using the controller as syntax correctly, it is used in my controller, te

Solution 1:

You cannot use controller as syntax defined using $routePovider or $stateProvider along with ng-controller. Remove your ng-controller in template html and your code will work: HTML

<div class="container">
  <div class="job" ng-repeat="process in vm.processes">
    <!-- Header [Job Name] -->
    <h3 class="job-name">{{ process.name }}</h3>
    <!-- Body [Job details] -->
    <div class="container">
      <p>{{ process.description }}</p>
      <ul class="job-details">
        <li>
            {{ process.scheduledRun.startTime }}
        </li>
        <li>
            {{ process.scheduledRun.endTime }}
        </li>
      </ul>
    </div>
  </div>
</div>

Also in some cases controllerAs doesn't work. Try using controller: ProcessController as vm syntax in that case

Solution 2:

write your controller like this and check the result.

app.controller('ProcessController', ['dataservice', function(dataservie){
    var vm = this;
    var dataService = dataservice;

    vm.processes = dataService.getProcesses();
}]);

Solution 3:

Try to inject dataservice above your controller function like below.

ProcessController.$inject = ['dataservice'];

So your controller will be like,

controller('ProcessController', ProcessController);

ProcessController.$inject = ['dataservice'];

function ProcessController(dataservice) {
    var vm = this;
    var dataService = dataservice;

    vm.processes = dataService.getProcesses();
}