AngularJS expected information not displaying

Question

I am working on a mobile application that gets a list of jobs from the server (WEBAPI) and populates the proper fields. When the user clicks on the job name, the application goes to a details page, where the job information needs to show again.

I am having issues getting the information to show.

Here is the index:

.state('jobs',{
            abstract: true,
            url: '/jobs',
            templateUrl: 'modules/jobs/views/jobs.html',
            controller: ['$scope', '$state', '$stateParams', 'jobs', function($scope, $state, $stateParams, jobs) {

                jobs.getData()
                    .then(function(jobs) {
                        $scope.jobs = jobs;
                    });

            }]
        })
        // Jobs > List
        .state('jobs.list', {
            url: '',
            title: 'All Jobs',
            templateUrl: 'modules/jobs/views/jobs.list.html' 
        })
        // Jobs > Detail
        .state('jobs.detail', {
            url: '/{JobId:[0-9]{1,4}}',
            title: 'Job Details',
            views: {
                'details': {
                    templateUrl: 'modules/jobs/views/jobs.detail.html',
                    controller: ['$scope', '$state', '$stateParams', 'utils', function($scope, $state, $stateParams, utils) {
                        $scope.job = utils.findById($scope.jobs, $stateParams.JobId);

                        $scope.edit = function(){
                            $state.go('.edit', $stateParams);
                        };

                    }]
                }, 
                '': {
                    templateUrl: 'modules/jobs/views/jobs.materials.html',
                    controller: ['$scope', 'materials', '$stateParams', function($scope, materials, $stateParams) {

                        materials.getDataById($stateParams.JobId)
                            .then(function(materials) {
                                $scope.materials = materials;
                            });

                        $scope.subHeader = 'Bulk Sack Materials';

                    }]
                }
            }
        })

Here is the Service:

app.factory('jobs', ['$resource', '$q', '$http', 'localStorageService', function($resource, $q, $http, localStorageService) {
    localStorageService.set('SessionId', 'A00DB328-7F9C-4517-AD5D-8EAA16FBBC8F');

    var SessionId = localStorageService.get('SessionId');
    return {
        getData: function() {
            var deferred = $q.defer();
            $http.get(baseUrl + 'Job/GetJobs?SessionId=' + SessionId, {
                cache: true
            }).success(function(jobs) {
                deferred.resolve(jobs);
            });
            return deferred.promise;
        }

    };

}]);

app.factory('materials', ['$resource', '$q', '$http', 'localStorageService', function($resource, $q, $http, localStorageService) {

    var SessionId = localStorageService.get('SessionId');

    return {
        getDataById: function(id) {
            var deferred = $q.defer();
            $http.get(baseUrl + 'Material/GetMaterials/' + id + '?SessionId=' + SessionId, {
                cached: 'true'
            }).success(function(materials) {
                deferred.resolve(materials);
            });
            return deferred.promise;
        }
    };

}]);

And here is the utils service:

app.factory('utils', function() { 
    return {
        findById: function findById(a, id) {
            for (var i = 0; i < a.length; i++) {
                if(a[i].id === id) {
                    return a[i];
                }
            }
            return null;
        }
    };
});

Here is the HTML for the job.list:

<div class="list-group">
<a class="list-group-item" ng-repeat="job in jobs" ui-sref="jobs.detail({ JobId: job.JobId })"> 
<dl>
    <dt>{{job.Name}}</dt>
    <dd>{{job.Location}}</dd>
</dl>

Some insight on how to get this to work would be awesome. Thank You-

Answer 1

If I have inferred your goal correctly, you're issue is on the following line:

$scope.job = utils.findById($scope.jobs, $stateParams.JobId);

$scope.jobs will not exist like you expect it to. The jobs object was created in the list view's controller's scope, not the details view's controller. You'll want to do something like you have in the '' controller

JobService.getJobById($stateParams.JobId).then(function(data) {
     $scope.job = data;
});