fire function ng-click automatically when ng-model is filled

Question

I want to fire my function Automatically when i complete my typing in ng-model. I applied 2 different technique but nothing work 1. Approch

    <div class="col-sm-6">
    <input type="text" class="form-control" ng-model="testing" placeholder="Name" maxlength="50" /></div>
    <span ng-if="testing.length != null " ng-show="Add()"></span>

2. Approach

   <div class="col-sm-6">
   <input type="text" class="form-control" ng-model="testing" placeholder="Name" maxlength="50" /></div>
   <span ng-show="testing && Add()"></span>
   

Both fire my function with single character. I want to fire Add() function when my typing is completed. I do not want to use button.

Answer 1

Try following 2 sample codes.

I hope following sample code could help you solve the problem you were facing

var app = angular.module('app', []);

app.controller('myCtrl', function($scope) {
  $scope.testing = "";
  
  $scope.Add = function() {
    console.log("Hope this Helps!!")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>

<div ng-app="app" ng-controller="myCtrl">
  <div class="col-sm-6">
    <input type="text" class="form-control" ng-model="testing" placeholder="Name" maxlength="50" />
  </div>
  <span ng-if="testing.length >=1 " ng-show="Add()"></span>
 <div>

or you could do like this

var app = angular.module('app', []);

app.controller('myCtrl', function($scope) {
  $scope.testing = ""; //model scope variable initialization
  
  $scope.testFun=function(a){ //function to check whether length of variable is greater than 0
  if (a>=1) return true;
  else return false;
  }
  
  $scope.Add = function() { //function to be exucuted when ng-if gets true value
    console.log("Hope this Helps!!")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>

<div ng-app="app" ng-controller="myCtrl">
  <div class="col-sm-6">
    <input type="text" class="form-control" ng-model="testing" placeholder="Name" maxlength="50" />
  </div>
  <span ng-if="testFun(testing.length)" ng-show="Add()"></span>
 <div>