javascript - How match unique id from template to a filter function in controller? -

here app.js:

.state('app.study_collections', {     url: "/studies/:studynoderef",     views: {       'menucontent': {         templateurl: "templates/rubyonic/overview.html"       }     } }) 

here snippet studies.html:

<div class="feed-item">   <div class="feed-media" ng-repeat="study in studies">     <img src="{{study.image}}" class="feed-image">     <div class="feed-gradient-overlay"></div>     <a href="#/app/studies/{{study.noderef}}">        <h4 class="feed-title">{{study.title}}</h4>     </a>   </div> </div> 

here snippet controller.js:

studies.all().then(function(payload){    $scope.studies = payload; });  studies.all().then(function(studies){    $scope.study = $filter('filter')(studies, function (d) {return d.noderef === '"'+ $stateparams.studynoderef + '"';})[0]; }); 

so studies.all() makes call studies service makes asynchronous calls json file data.

studies.all().then(function(payload){   $scope.studies = payload; }); 

this gets list of studies iterated in studies.html file. each study has unique noderef. when click on study maps url "#/app/studies/{{study.noderef}}". after want use noderef filter out study object studies collection supposed done

studies.all().then(function(studies){ $scope.study = $filter('filter')(studies, function (d) {return d.noderef === '"'+ $stateparams.studynoderef + '"';})[0]; }); 

where d.noderef === '"'+ $stateparams.studynoderef + '"' matches correct noderef , filters out study. when try print study in template {{study}}, nothing appears , when console.log() undefined.

how fix this? please let me know if clarifications needed.

edit

i made changes controller. able access noderef url doesn't work in filter function reason unless manually enter it. have @ here https://gist.github.com/shubhamsinha92/01b492c62c4dd5ad3a7c

this services.js looks like:

var app = angular.module('starter.services', [])   .factory('studies',function($http,$filter,$q){     var deferred = $q.defer();     var studies = [];     $http.get("studies.json").success(             function(data){                 //studies = data;                 angular.copy(data, studies);                 //at point can filter data required, or not @ all. suggest returning entire json response , not filtering here @ all, let controllers filter data needed maintain layer of separation between controller , service.                  deferred.resolve(studies);             }         );    return {     all: function(){       return deferred.promise;     } }; }) 

the appears comparing '"nodeid"' 'nodeid'.

original

$filter('filter')(payload, function (d) {     $scope.id = '"' + $rootscope.nodeid + '"';     return d.noderef === $scope.id ;})[0];  

solution

$filter('filter')(payload, function (d) {   $scope.id = "" + $rootscope.nodeid;   if (d.noderef === $scope.id)     return d;})[0];  

please see example

https://jsfiddle.net/hb7lu/15157/