javascript - Angular.js and server-side search - how to, best practices -

in app had simple angular.js filter , worked fine, need integrate server-side search. have endpoint , created directive watches query in input , makes request server returning results:

html:

<search ng-model="query"></search> 

js:

...         restrict: 'e',         scope: {             ngmodel: '='         },         template: '<input type="text" ng-model="ngmodel" />',         link: function (scope, elem, attrs) {             var timer = false;             scope.$watch('ngmodel', function (value) {                 if (timer) {                     $timeout.cancel(timer);                 }                 timer = $timeout(function () {                     if (value) {                         scope.$parent.items = rest.query({ resource: 'search', query: value });                     }                 }, 1000);             });         }  ... 

however problem in scope. see i'm writing results parent scope items because need search results stay on same page same controller (as in client-side filter):

common template several controllers , search results:

<ul class="items">   <li class="item item{{$index+1}}" ng-repeat="item in items">   ...   </li> </ul> 

so after representing results of server-side search query, when clearing input field need somehow return items represented before search , cannot find optimal solution this..

maybe made similar before?

not sure if way i've got directive listing students (optionally course) gets data factory in turn uses $resource fetch data. fiddling around , before not sure if right way either.

seems work post code here.

the template /partials/v001/student-course-list.html:

search: <input data-ng-model="query" data-ng-change="search()"/> course <input type="checkbox" name="courseid"    data-ng-model="courseid" data-ng-change="search()"> 

the directive:

// list students (optional course) both students , course //   set outside , passed through angular.module('student').directive('studentcourselist',         ['dataprovider',           function(dataprovider) {             return {             restrict: 'a',             //static in gae cached year             //  need versioning             templateurl: '/partials/v001/student-course-list.html',             scope: {               course: '=',               students: '='             },             link: function(scope, elem, attrs) {               scope.search = functions.searchstudentsbyname(                 dataprovider, scope);               }             };           }         ]); 

the function:

//containing controllers/directives dom event handlers //  ng-change search box , isincourse checkbox var functions = {   searchstudentsbyname: function(dataprovider, scope) {     return function() {       //half second delay before starting search       //  user may typing several characters       cleartimeout(scope.timeoutid);       scope.timeoutid = settimeout(function() {         var sid=(scope.courseid)?scope.course.id:false,         q=(scope.query)?scope.query:"";         //can check q again if len<2 set ""         //  because isincourse may have triggered         scope.students=dataprovider.searchstudentsbyname(                 scope.query, sid);       }, 500);     };   } }; 

the factory (called dataprovider), used $q before return promise , resolve seems $resource can return $resource , data bind when result returned.

angular.module('dataprovider', []).   factory('dataprovider', ['$resource','$q',function($resource,$q) {      //anything having /app/student/ goes google app server     //   prefer add getstring on url     var studentfromapp = $resource('/app/student/',      {}     );     return {      //course id optional in case student course      searchstudentsbyname:function(sname,cid){         return studentfromapp.query(           {courseid:cid,studentname:sname});       }     }; }]);