javascript - ng-click doesnt seem to work on programmatically inserted list ( li ) elements -

i have search box on input json data server , create menu list json data. so, i've created funcion in controller triggered when there change in search box through ng-change, function calls different function createmenu injects list elements like, element.append(''+name+'');

but handleclick method seems never triggered when click list item. can tell me how resolve this? appreciated. thanks! :)

//ascript.js  var landapp = angular.module('landapp', ['ngroute']); function navctrl($scope , $compile, $element, $rootscope , $http) {         $scope.handleclick = function(id) {           console.log("clicked");           console.log(id);         };       $scope.createmenu = function(elementjson,element) {        if(angular.isarray(elementjson)) {          angular.foreach(elementjson, function(child , key) {            $scope.createmenu(child,element);          });            return;        }         var name = elementjson.name;        var id = elementjson.id;        var children = elementjson.child;         if(name=="product"){          $scope.createmenu(children,element);          return;        }         var elem = angular.element('<ul></ul>');         element.append(elem);         $scope.createmenuelement(name,id,elem);        if(children != null || children !=undefined) {          if(angular.isarray(children)){              angular.foreach(children , function(child,key) {                  $scope.createmenu(child,elem);              });            } else {                  $scope.createmenu(children,elem);            }         }     }      $scope.createmenuelement = function(name,id,element) {       element.append('<li id = '+id+' class = product ng-click = handleclick('+id+') >'+name+'</li>');   }     $scope.search_change = function() {      if($scope.query.length > 0) {        var elem = angular.element('#navigator');        //angular.element('#navigator');        $http.get('/data/search?query=' + $scope.query).           success(function(data, status, headers, config) {            console.log(data);             elem.html('');              var children = data.child;              console.log(children);                 $scope.createmenu(children,elem);           }).           error(function(data, status, headers, config) {             // log error           });      };    } }  } 

i think should have menu variable, i.e.:

$scope.menu = [     {         id: 123,         name: 'this link take blabla'     },     ... ]; 

then in html have like:

<ul>     <li ng-repeat="item in menu" ng-click="dosomething(item.id)">{{item.name}}</li> </ul> 

also, have have service sends request data source , populates $scope.menu;