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

<divclass="container"><divclass="job"ng-repeat="process in vm.processes"><!-- Header [Job Name] --><h3class="job-name">{{ process.name }}</h3><!-- Body [Job details] --><divclass="container"><p>{{ process.description }}</p><ulclass="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'];

functionProcessController(dataservice) {
    var vm = this;
    var dataService = dataservice;

    vm.processes = dataService.getProcesses();
}