javascript - Directive never gets called angularjs -

we creating directive increase , descrease number in text box when user clicks on buttons.

here code of custom directive.

var cedirectives = angular.module('app.customnumberdirectives', []) .directive('ngcustomnumber', ['$compile', function ($compile) { var template_url = '/customnumber/index.html'; var tem = '<div class="wrapper">' +           '  <input type="text" data-ng-model="{{model}}" data-ng-blur="onblurhandler()">' +           '  <button ng-click="increase()" style="cursor:pointer; background-color: transparent">inc</button>' +           '  <button ng-click="decrease()" style="cursor:pointer; background-color: transparent">dec</button>' +           '</div>';  // set default template directive $templatecache.put(template_url,tem);  return {     restrict: "e",     scope: {         model: '@',         onblurevent: '&'     },     replace: true,     templateurl: function (element, attrs) {         return attrs.templateurl || template_url;     },     link: function (scope, element, attributes) {          scope.onblurhandler = function () {             if (scope.onblurevent) {                 scope.onblurevent();             }         };          scope.increase = function () {             alert('inc');         };         scope.decrease = function () {             alert('dec');         };     } }; } ]); 

in html view:-

 <ngcustomnumber model="weight" onblurevent="save"></ngcustomnumber> 

(1) no error in console.

(2) tried putting alert on top of directive. no alert message comes up.

thanks in advance!

try this:

<ngcustom-number model="weight" onblurevent="save"></ngcustom-number>