angularjs - When I change the value of an input clicking on a button $bindTo doesn't work firebase -

so i'm beginner angularjs , firebase , i'm trying develop app adds values(numerical) on input. far have this:

app.js:

var app = angular.module("app", ['firebase']);  app.directive('addone', function() {      return {         link: function(scope,element) {             element.bind('click', function() {                 console.log(element.parent().find('input'))                 element.parent().find('input')[1].value++;             });         }     } }); 

and view:

<section class="form-group">    <label for="">$</label> <input type="button" value="+" add-one>    <input ng-model="user.level" type="text" class="form-control" /> </section> 

and controller:

app.controller('mcontroller', ['$scope', 'user',     function($scope, backhome, user, adicionar){          $scope.user = user(1);         user(1).$bindto($scope, "user");      } ]); 

the thing after click button directive add-one value of input changes $bindto not working...

so why bindto doesn't work when make change directly in dom?

angularjs doesn't care value of input set to, cares what's in ng-model. try this...

app.directive('addone', function() {      return {         link: function(scope,element) {             element.on('click', function() {                 scope.$apply(function(){                     scope.user.level++                 });             });         }     } }); 

as pointed out @pankajparkar, need use scope.$apply when want update binding event.

angular.module('demo', [])  .controller('democontroller', function($scope){    $scope.user={level: 1};  })  .directive('addone', function() {     return {      link: function(scope, element, attrs) {        element.on('click', function() {          scope.$apply(scope.user.level++);        });      }    }  })  .directive('unaryinput', function(){    return {      restrict: 'ea',      scope: {        model: "=",        txt: '@buttontext'      },      template: '<input type="text" ng-model="model" /><button>{{txt}}</button>',      link: function(scope, element, attrs) {          if(angular.isdefined(attrs.initialval)) {            scope.model = attrs.initialval;          }                  element.on('click', function() {            if (attrs.direction === 'decrement') {              scope.$apply(scope.model--);            } else {              scope.$apply(scope.model++);            }          });                }    };  });

<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>    <div ng-app="demo" ng-controller="democontroller">    <input type="text" ng-model="user.level">    <input type="button" value="+" add-one>    <hr>    <unary-input button-text="add one" model="user.level" direction="increment"></unary-input>    <unary-input button-text="-" model="user.level" direction="decrement"></unary-input>    <hr>    <unary-input button-text="-" model="user.val" direction="decrement" initial-val="10"></unary-input>  </div>

in angularjs, want change view changing model it's based on, versus doing imperatively might traditional jquery approach example (traversing dom , incrementing value).

update

okay, here's nice reusable version of (please check snippet see in action).

the template includes both button , input. accepts 4 values set attributes:

1. button-text: text want show on button.
2. model: model value input.
3. initial-val: initial value input if don't want initialize on controller.
4. direction: whether increment or decrement values. 1 accepts string "decrement" subtract. if have no direction set or other value set in attribute, increment.

so, use this:

<unary-input button-text="subtract one" model="user.val" direction="decrement" initial-val="10"></unary-input> 

and directive looks this:

.directive('unaryinput', function(){   return {     restrict: 'ea',     scope: {       model: "=",       txt: '@buttontext'     },     template: '<input type="text" ng-model="model" /><button>{{txt}}</button>',     link: function(scope, element, attrs) {         if(angular.isdefined(attrs.initialval)) {           scope.model = attrs.initialval;         }          element.on('click', function() {           if (attrs.direction === 'decrement') {             scope.$apply(scope.model--);           } else {             scope.$apply(scope.model++);           }         });        }   }; });