AngularJS Value is NaN after assigned in promise success function - angularjs

Question

I've been struggling with this the past few Hours and I don't know what to do about it. I am doing an AngularJS application and I use angular-timer Directive.
http://siddii.github.io/angular-timer/
It works perfect when I dynamically assign TimerValue value to the end-time attribute in ng-repeat. But it fails when I use it in My Details page which is using routeParams
<timer end-time="itemDetail.startDate">
so on the Detail page when the user click somewhere he is getting redirected to /someurl/1 The page loads fine the iMages the text everything is working fine. But the timerValue is showing NaN everywhere here is the app structure I've been using
JSON data
[
{
"id" : "1",
"productTitle" : "Motorola 156 MX-VL",
"imgUrl" : "app/assets/images/laptop.png",
"itemPrice" : "170",
"startDate" : 1431249465000
}
]
Page controller
app.controller('detailsController', ['$scope', '$routeParams','itemsService',
function($scope, $routeParams,itemsService) {
itemsService.getItemById($routeParams.itemId).then(function(data){
$scope.itemDetail = data;
});
}]);
The factory
app.factory('itemsService', ['$http','$filter', function($http, $filter){
var itemsService = {
getAllItems: function() {
// $http returns a promise, which has a then function, which also returns a promise
var promise = $http.get('app/jsons/items.json').then(function (response) {
return response.data;
});
// Return the promise to the controller
return promise;
}, getItemById : function(id) {
var promise = $http.get('app/jsons/items.json').then(function (response) {
return $filter('filter')(response.data, {id: id})[0];
});
// Return the promise to the controller
return promise;
}
};
return itemsService;
}]);
And in the View I'm using it like this
<div class="large-12 columns" >
Remaning time: <timer end-time="startDate">{{days}} Days, {{hours}} Hours, {{minutes}} Minutes, {{seconds}} Seconds.</timer>
</div>
The timer works if I put the Timestamp directly in the "end-time" attribute and it also work if I assign the Value directly in the controller
$scope.startDate = 1431249465000;
But it doesn't work if I do it like this:
<timer end-time="itemDetail.startDate">
Why is this happening?

Answer 1

you needs eval expression for end-time attributes
<timer end-time="{{itemDetail.startDate}}">

Answer 2

Okay guys. I found a solution that worked for me and its pretty easy though. It seems that the problem is related with the way how angular execute its methods. When i assign a filtered object to the $scope.itemDetail= filteredObj. And when i try to use the itemDetail.startDate in the html the value does not get resolved correctly and i see the NaNs. So this might work correctly when i hook up the Rest api which is still under development but for now i am using mockup jsons with dummy data, and god nows what is going on behind the scenes with Angular. The solution i used was simply to use ng-repeat instead of directly accessing the object property from the html. And it worked.
The solution
i added a ng-repeat directive to the parent div that holds my Item details. And simply accessing the properties like this
<div ng-repeat="item in itemDetails">
{{item.name}}
Remaning time: <timer end-time="item.StartDate">{{days}} Days, {{hours}} Hours, {{minutes}} Minutes, {{seconds}} Seconds.</timer>
</div>
And in this case it works as it suppose to either way or another in my itemDetails object array i have only one Object since i filter the data according the ID that is passed from the $routeParams