AngularJS How to get data to controller via $rootScope?

Question

I'm working on an mobile app and I'm having problems with getting data to the controller. What i do is i get the data from a service and that works well (on routing this is '/' or root directory):

var listdnModule = angular.module('listdn', []);

listdnModule.factory('getActiveDnService', ['$http', function ($http) {
    return {
        getActiveDnSvc: function (izvajalecID) {
            return $http({ method: 'POST', url: 'svc.aspx/getActiveDN', data: "{'izvajalecID':" + "'" + izvajalecID + "'}", cache: true });
        }
    };
}]);

listdnModule.controller('listdnCtrl', ['$scope', '$http', 'getActiveDnService','$rootScope', function ($scope, $http, svc, $rootScope) {
    $scope.mjav = 1;
    svc.getActiveDnSvc($scope.mjav).success(function (data) {
        $rootScope.dnlist = data.d;
        $scope.listdn = data.d;
    });
}]);

So this works fine. It sets the data to the rootScope and to localscope and reads it from local scope.

Then i'm linking the list of Costumers to costumerdetail. The route settings are like this:

mSvc.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
        when('/', {
            templateUrl: 'tmpl/listdn.html',
            controller: 'listdnCtrl'
        }).
        when('/settings', {
            templateUrl: 'tmpl/nastavitve.html',
            controller: 'settings'
        }).
        when('/dndetail/:dnid', {
            templateUrl: 'tmpl/dndetail.html',
            controller: 'dndetailCtrl'
        }).
        otherwise({
            redirectTo: '/'
        });
  }]);

The error comes after i try to get dndetail. I get the right ID from $routeParams but i dont get the data in the right time. The code is this:

var dndetail = angular.module('dndetail', []);

dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {
    console.log($rootScope.dnlist[0]);
    $scope.datal = $rootScope.dnlist;
    $scope.id = $routeParams.dnid;
    for(var i = 0; i <= datal.length; i++) {
        if (datal[i].ID === $scope.id) {
            $scope.data = datal[i];
        }
    }
}]);

And this is the error i get:

As you can see the console.log gets the object and prints the output (I masked it because it's company data) while datal is undefined. The special AngularJS tab in chrome DevTools also says the data is there:

And for the end the template of the view that doesnt get data:

<ul ng-controller="dndetailCtrl" class="list-group">
    <li class="list-group-item">
        <div class="row info-row-li">
            <div class="pull-left">Naslov</div>
            <div class="pull-right">
                <a ng-href="https://maps.google.com/?q={{ data.Ulica }} {{ data.Posta }} {{ data.Kraj }}">
                    {{ $root.dnlist[1].Ulica }}<br />
                    {{ data.Posta }} {{ data.Kraj }}<br />
                    {{ data.Drzava }}</a>
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="row info-row-li">
            <div class="pull-left">Datum izvedbe</div>
            <div id="kupec-pe" class="pull-right">{{ data.DatumIzvedbe }}</div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="row info-row-li">
            <div class="pull-left">Datum naloga</div>
            <div id="kupec-dst" class="pull-right">{{ data.DatumNaloga }}</div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="row info-row-li">
            <div class="pull-left">Opis:</div>
            <div id="kupec-komerc" class="pull-right">{{ data.Opis }}</div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="row info-row-li">
            <div class="pull-left">Šifra dejavnosti:</div>
            <div id="kupec-sif" class="pull-right">{{ data.sifDej }}</div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="row info-row-li">
            <div class="pull-left">Šifra dejavnosti:</div>
            <div id="Div1" class="pull-right">{{ data.DatumIzvedbe }}</div>
        </div>
    </li>
</ul>

Any ideas?

UPDATE

This is the new controller:

dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {
    $rootScope.dnlist;
    $scope.id = $routeParams.dnid;
        for (var i = 0; i <= $rootScope.dnlist.length; i++) {
            if ($rootScope.dnlist[i].ID === $scope.id) {
                $scope.data = $rootScope.dnlist[i];
            }
        }
}]);

still doesnt work. From an array of elements i want to get one element by id and then save it to data so i can read from data. For loop doesnt get the data (unindentified dnlist) but if i bind {{ $root.dnlist[1].Property }} in the template it works.

Answer 1

I don't think problem is fixed by this answer and tried to delete it, I have undelete it as it has been referred in a comment.

$http in angularjs returns a promise, you can't use the promise directly to access the data, check this answer where it answer something very similar.

Answer 2

If anyone was wondering the problem was with the equality operator. If I change === with the one that checks type == i dont get the TypeError: Cannot read property 'ID' of undefined error any more. Since this is the solution to the problem I'd like to have an explanation also. I'm a javascript beginner to be true and if someone got an idea what happened here, I'd very much like to know the explanation.

The new controller that works:

dndetail.controller('dndetailCtrl', ['$rootScope', '$scope', '$routeParams', function ($rootScope, $scope, $routeParams) {
    $rootScope.dnlist;
    $scope.id = $routeParams.dnid;
        for (var i = 0; i <= $rootScope.dnlist.length; i++) {
            if ($rootScope.dnlist[i].ID == $scope.id) {
                $scope.data = $rootScope.dnlist[i];
            }
        }
}]);