title: Call Angular Function with Jquery
body: <p>How to call angular function when data in text box?
  here is my code</p>
  
  <p>html</p>
  
  <pre><code>&lt;!DOCTYPE html!&gt;
  &lt;html xmlns:ng="http://angularjs.org" data-ng-app="flightSearch" lang="en"&gt;
      &lt;head&gt;
          &lt;script src="js/jquery-1.9.1.js"&gt;&lt;/script&gt;
          &lt;script src="js/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt; 
          &lt;div data-ng-controller="flightSearchController"&gt;
  
  &lt;input type="text" data-ng-model="query" data-ng-change="flightSearch()" placeholder="e.g RGN&gt;MDL, KAW&gt;RGN"  id="targetTextField"  /&gt;
  
  &lt;input id="options3" type="text" style="display:none;"/&gt;
  
  
  
  &lt;select id="options"&gt;
    &lt;option value="From" selected&gt;From&lt;/option&gt;
    &lt;option value="RGN" ng-click="flightSearch()"&gt;RGN&lt;/option&gt;
    &lt;option value="NYU" ng-click="flightSearch()"&gt;NYU&lt;/option&gt;
    &lt;option value="MDL" ng-click="flightSearch()"&gt;MDl&lt;/option&gt;
    &lt;option value="HEH" ng-click="flightSearch()"&gt;HEH&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="options2"&gt;
    &lt;option value="To" selected&gt;To&lt;/option&gt;
    &lt;option value="&gt;RGN" ng-click="flightSearch()"&gt;RGN&lt;/option&gt;
    &lt;option value="&gt;NYU" ng-click="flightSearch()"&gt;NYU&lt;/option&gt;
    &lt;option value="&gt;MDL" ng-click="flightSearch()"&gt;MDl&lt;/option&gt;
    &lt;option value="&gt;HEH" ng-click="flightSearch()"&gt;HEH&lt;/option&gt;
  &lt;/select&gt;
  
              &lt;ul&gt;
                  &lt;li data-ng-repeat="route in filteredItems"&gt; 
                      &lt;div data-ng-bind-html="route.displayRoute"&gt;&lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>&lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/angular-sanitize.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          function buildPaths(route){
              var points = route.split("&gt;");
              var paths = {};
              for(var i = 0; i &lt; points.length; i++){
                  var from = points[i];
                  for(var j = i; j &lt; points.length; j++){
                      var to = points[j];
                      if (from != to){
                          if(paths[from + "&gt;" + to]){
                              if(j-i &lt; paths[from + "&gt;" + to][0])
                                  paths[from + "&gt;" + to] = [j-i,points.slice(i,j+1).join("&gt;")]
                          }else{
                              paths[from + "&gt;" + to] = [j-i,points.slice(i,j+1).join("&gt;")]
                          }
                      }
                  }//for j
              }//for i
              return paths;
          }
  
          var flightSearch = angular.module('flightSearch',['ngSanitize']);
          flightSearch.controller('flightSearchController', function ($scope){
  
              // Data definitions, route is actual data,
              // display route is for higlight display purpose only.
              var dataRoutes = [
              {route: "RGN&gt;NYU&gt;MDL&gt;HEH&gt;RGN", displayRoute: "", paths: []},
              {route: "RGN&gt;HEH&gt;KYT&gt;THK&gt;KYT&gt;HEH&gt;RGN", displayRoute: "", paths: []},
              {route: "RGN&gt;MDL&gt;HEH&gt;NYU&gt;RGN", displayRoute: "", paths: []},
              {route: "RGN&gt;MDL&gt;STW&gt;RGN", displayRoute: "", paths: []},
              {route: "RGN&gt;NYU&gt;MDL&gt;MYT&gt;PTO&gt;MYT&gt;MDL&gt;NYU&gt;RGN", displayRoute: "", paths: []},
              {route: "RGN&gt;HEH&gt;NYU&gt;MDL&gt;RGN", displayRoute: "", paths: []},
              {route: "RGN&gt;TVY&gt;MGU&gt;KAW&gt;MGU&gt;TVY&gt;RGN", displayRoute: "", paths: []},
              {route: "RGN&gt;TVY&gt;KAW&gt;TVY&gt;RGN", displayRoute: "", paths: []},
              {route: "RGN&gt;KAW&gt;MGU&gt;TVY&gt;RGN", displayRoute: "", paths: []}];
  
              // Pre-calculate the possible path the shortest distance
              for(var r = 0; r&lt; dataRoutes.length; r++){
                  dataRoutes[r]["paths"] = buildPaths(dataRoutes[r]["route"]);
                  dataRoutes[r]["displayRoute"] = dataRoutes[r]["route"];
              }
  
              // Assign the routes. This is unfiltered origintal data (all)
              $scope.routes = dataRoutes;
  
              // This is filtered list for dispaly
              $scope.filteredItems = $scope.routes;
  
              // Search/filter function. This updates filteredItems list
              $scope.flightSearch = function(){
  
  
                  if($scope.query.length &gt; 6){
                      $scope.filteredItems = [];
                      for(var index in $scope.routes){
                          $scope.routes[index]["displayRoute"] = $scope.routes[index]["route"];
                          if($scope.routes[index]["paths"][$scope.query] !== undefined){
                              var match = $scope.routes[index]["paths"][$scope.query][1];$scope.query
                              $scope.routes[index]["displayRoute"] = $scope.routes[index]["route"].replace(match,"&lt;b&gt;" + match + "&lt;/b&gt;");
                              $scope.filteredItems.push($scope.routes[index]);
                          }
                      }
                  }else{
                      for(var r = 0; r&lt; $scope.routes.length; r++){
                          $scope.routes[r]["displayRoute"] = $scope.routes[r]["route"];
                      }
                      $scope.filteredItems = $scope.routes;
                  }
              }
          });
          flightSearch.filter("highlight",function(){
                  return function(text){
                          return text;
                  }
          });
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(function() {
  $("#options").change(function(){
          setTarget()
  });
      $("#options2").change(function(){
          setTarget();
  });
      $("#options3").change(function(){
          setTarget();
  });
      $("#targetTextField").change(function(){
          setTarget();
  });
  });
  
  function setTarget(){
      var tmp = $("#options").val();
      tmp += $("#options2").val();
      tmp += $("#options3").val();
      $('#targetTextField').val(tmp);
  }
  
  
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>when two select option insert data in text box
  want to call search function on change.strong text</strong></p>