angularjs - How to correct this TypeError Cannot read property of undefined

Question

I have a table on my layout page with a list of jobs. i am using rootscope and sessionStorage to keep what ever is selected active through out the site. Every job has changeOrders. When I highlight a job I then click on the changeOrder view. the changeOrders that belong to that job appear on a table. when I double click on one of them to open the modal nothing happens and I get the error message. However when I select a new Job on the jobs table it will then work. So it is that initial try that does not work. Error Message

TypeError: Cannot read property 'JobName' of undefined
at Scope.$scope.editChangeOrderModal (http://localhost:44301/MyScripts/JobController.js:186:40)
at http://localhost:44301/Scripts/angular.js:10836:21
at http://localhost:44301/Scripts/angular.js:19094:17
at Scope.$eval (http://localhost:44301/Scripts/angular.js:12673:28)
at Scope.$apply (http://localhost:44301/Scripts/angular.js:12771:23)
at HTMLTableCellElement.<anonymous> (http://localhost:44301/Scripts/angular.js:19093:21)
at HTMLTableCellElement.x.event.dispatch (http://localhost:44301/Scripts/jquery-1.10.2.min.js:22:14129)
at HTMLTableCellElement.v.handle (http://localhost:44301/Scripts/jquery-1.10.2.min.js:22:10873) 

Controller

//Edit ChangeOrder Modal
$scope.currentItem = null;
$scope.editChangeOrderModal = function (model) {
    $scope.JobName = $rootScope.job.JobName;
    $scope.JobId = $rootScope.job.JobId;
    $scope.currentItem = model;
    $ekathuwa.modal({
        id: "editChangeOrderModal", contentStyle: "width:800px;heigth:400px",
        scope: $scope,
        templateURL: "ModalEditChangeOrder"
    });
}` 
 //Sync Table Selections / sessionStorage
$scope.selectedJob = $sessionStorage.$default($scope.jobArray[1]);
$scope.selectJob = function (job) { $rootScope.job = job; angular.extend($scope.selectedJob,    job); };
$scope.clearSelectedJob = function () { $sessionStorage.$reset(); };`

Layout page Main Job table

<table class=" table table-bordred table-striped table-hover">
                    <tr><th>No</th><th>Name</th></tr>
                    <tr ng-repeat="job in jobArray" class="pointer" ng-class="{highlight: job.JobNumber===selectedJob.JobNumber}">
                        <td ng-dblclick="editJobModal(job)" ng-click="selectJob(job)">{{job.JobNumber}}</td>
                        <td ng-dblclick="editJobModal(job)" ng-click="selectJob(job)">{{job.JobName}}</td>
                    </tr>
                </table>
            </div><!--End Job Tabl

Updated Code

//Edit ChangeOrder Modal
$scope.currentItem = null;
$scope.editChangeOrderModal = function (model) {
    if ($rootScope.hasOwnProperty('job') && $rootScope.job != null) {
        $scope.JobName = $rootScope.job.JobName;
        $scope.JobId = $rootScope.job.JobId;
    }
    //$scope.JobName = $rootScope.job.JobName;
    //$scope.JobId = $rootScope.job.JobId;
    $scope.currentItem = model;
    $ekathuwa.modal({
        id: "editChangeOrderModal", contentStyle: "width:800px;heigth:400px",
        scope: $scope,
        templateURL: "ModalEditChangeOrder"
    });
}

//GET Jobs
$scope.jobArray = {};
JobGet.query().then(function (data) { $scope.jobArray = data; }, function (reason) { errorMngrSvc.handleError(reason); });

Answer 1

Like typmeJV said, $rootScope.job is null.

You can do:

if ($rootScope.hasOwnProperty('job') && $rootScope.job != null) {
    $scope.JobName = $rootScope.job.JobName;
    $scope.JobId = $rootScope.job.JobId;
}

But this still smells bad? If the job object is missing from the $rootScope bad things may happen.

Why are you putting the job on the $rootScope?