javascript - How to use ngChange on a div (or something similar) -

i had input had ng-change on it, changed contenteditable div, can have little more control on can input. thing when changed input div, no longer able use ng-change. can obtain same effect/result?

here how using in template:

<div class="form-control" ng-model="search" ng-change="searchchanged()" contenteditable="true">{{seach}}</div> 

inorder support ng-model ng-change other form element, need create custom directive. example simple implementation below directive named contenteditable (much similar angular having internal directives input, form etc), have require ng-model , on keyup event set viewvalue , render ng-model. when setviewvalue ng-model , values different prev value angular evaluate ng-change expression.

.directive('contenteditable', function() {       return {         require: 'ngmodel',         restrict: 'a',         link: function(scope, elm, attr, ngmodel) {            function updateviewvalue() {             ngmodel.$setviewvalue(this.innerhtml);           }           //binding keyup, lly bind other events of interest            //like change etc..           elm.on('keyup', updateviewvalue);            scope.$on('$destroy', function() {             elm.off('keyup', updateviewvalue);           });            ngmodel.$render = function(){              elm.html(ngmodel.$viewvalue);           }          }     } }); 

and do:

<div class="form-control" type="search"        ng-model="seach" ng-change="searchchanged()"        contenteditable="true"></div> 

angular.module('app', []).controller('ctrl', function($scope) {    $scope.seach = "initial";    $scope.searchchanged = function() {      console.log('changed', $scope.seach);    }  }).directive('contenteditable', function() {    return {      require: 'ngmodel',      restrict: 'a',      link: function(scope, elm, attr, ngmodel) {          function updateviewvalue() {          ngmodel.$setviewvalue(this.innerhtml);        }          //or bind other events        elm.on('keyup', updateviewvalue);          scope.$on('$destroy', function() {          elm.off('keyup', updateviewvalue);        });          ngmodel.$render = function() {          elm.html(ngmodel.$viewvalue);        }        }    }  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  <div ng-app="app" ng-controller="ctrl">    edit    <div class="form-control" type="search" ng-model="seach" ng-change="searchchanged()" contenteditable="true"></div>    {{seach}}  </div>