Angular controller is not binding service object property ng-repeat

Question

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, template, as well as in my .config() $state (ui-router) block. But for some reason it is not displaying anything on the page.

I tried debugging in chrome and when I placed a break point in the controller, vm.processes held the object (an array with 4 items, everything checked out) but again nothing was displayed in the view, which is odd b/c vm. exposes anything in the controller so it should be able to be accessed from the template.

I defined a simple service that returns a JSON object, I was having trouble grabbing the file itself using $http so I just opted to hardcode the values in the service file:

.factory('dataservice', function dataservice($http) {
        return {
            getProcesses: getProcesses
        };

        function getProcesses() {
            // return $http.get('data\processes.json')
            //     .then(getProcessesComplete)
            //     .catch(getProcessesFailed);

            // function getProcessesComplete(response) {
            //     return response.data.results;
            // }

            // function getProcessesFailed(error) {
            //     console.log('Error retrieving processes. ' + error.data);
            // }

            return {
                "processes": [
                    {
                        "name": "mergeFiles",
                        "id": 1,
                        "description": "Merge files in /files on server 3",
                        "scheduledRun": {
                            "startTime": "2016-06-27T18:25:00",
                            "endTime": "2016-06-27T18:26:00"
                        }
                    },
                    {
                        "name": "monthlyImport",
                        "id": 2,
                        "description": "Import records on server 1",
                        "scheduledRun": {
                            "startTime": "2016-06-01T12:00:00",
                            "endTime": "2016-06-01T18:05:00"
                        }
                    },
                    {
                        "name": "tickeTrakBilling",
                        "id": 3,
                        "description": "...",
                        "scheduledRun": {
                            "startTime": "2016-06-27T19:15:00",
                            "endTime": "2016-06-27T18:20:00"
                        }
                    },
                    {
                        "name": "batch092",
                        "id": 4,
                        "description": "run batch092.bat on server 4",
                        "scheduledRun": {
                            "startTime": "2016-06-27T1:25:00",
                            "endTime": "2016-06-27T11:26:00"
                        }
                    }
                ]
            };
        }
    });

now the controller is written using the Controller As syntax:

controller('ProcessController', ProcessController);

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

    vm.processes = dataService.getProcesses();
}

so now the controller should expose JSON object

the template is as follows:

<div class="container" ng-controller="ProcessController as vm">
<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>

The state is defined as follows:

                .state('process', {
                url: '/:month/:date',
                templateUrl: '/app/templates/process.html',
                controller: 'ProcessController',
                controllerAs: vm
            });

Answer 1

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();
}]);

Answer 2

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();
}

Answer 3

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