javascript - angularJS template url is not loading automatically -

1. it's loading when type char in input type="search".
2. page calling 'ajax call' twice. request fire twice on 'single click' or 'onpageload'

index.html

this html file has search box

<div>     <div class="input-group">         <input type="search" class="form-control search" ng-model="searchtag" tabindex="1">         <div class="input-group-btn">             <button class="btn btn-default" type="submit" ng-click="search()"></button>         </div>         <ng-view></ng-view>     </div> 

this search box not attached why silly thing happening??

template url loading in ng-view

---

index.js file:

here have defined configuration of routing template url.

angular.module("myapp", ['ngroute'])     .config(["$routeprovider", function($routeprovider) {         $routeprovider.             when("/", { templateurl: "pic.html" }).             when("/search", { templateurl: "pic.html" }).             when("/viplist", { templateurl: "cust.html" }).             otherwise({ redirectto: "/", templateurl: "pic.html" });     }]     ) 

here have created service call send ajax call server , returns json object. calling ajax call twice on each request , returning 2 'json' data object.

.factory('search', [function($http, $scope) {     return {         fetchpopular: function($scope, callback) {              $.ajax({                 type: "post",                 url: 'search',                 data: {search : $scope.globesearch},                 datatype: 'json'             }).                 success(function(data, status, headers, config) {                     console.log(data);                     if(data.data.length<=0){                         alert("no data found");                     }                     callback(data.data);                 })                 .error(function(data, status, headers, config) {                 });         }     }; } ])  .controller("fetch", function($scope, $interval, $location, search) {      $scope.globesearch="sachin";      $scope.pics = [];     $scope.have = [];     $scope.orderby = "-comments.count";     $scope.getmore = function(callback) {         search.fetchpopular($scope, function(data) {              for(var i=0; i<data.length; i++) {                 if (typeof $scope.have[data[i].id]==="undefined") {                     $scope.pics.push(data[i]) ;                     $scope.have[data[i].id] = "1";                 }             }             $location.path("/search");         });     };       $scope.getmore();      $scope.searchpopular = function(callback) {          if($scope.searchstr!=null && $scope.searchstr!=""){ $scope.globesearch=$scope.searchstr; }          $scope.pics = [];         $scope.have = [];         $scope.orderby = "-comments.count";         search.fetchpopular($scope, function(data) {             for(var i=0; i<data.length; i++) {                 if (typeof $scope.have[data[i].id]==="undefined") {                     $scope.pics.push(data[i]) ;                     $scope.have[data[i].id] = "1";                 }             }             $location.path("/search");         });     }; 

i'm having hard time understanding you're doing here, can see @ least few problems.

i'm not seeing code controller, nor seeing templates. in order routing work, application's route needs change (ideally inside app's controllers). example, if inside controller called $location.path('/search'), angular load associated template , invoke controller.

if wouldn't mind putting live demo on plunker or jsfiddle, i'm sure more meaningful help.

edit

i see biggest problems off bat. let's again @ routing configuration.

angular.module("myapp", ['ngroute'])     .config(["$routeprovider", function($routeprovider) {         $routeprovider.             when("/", { templateurl: "pic.html" }).             when("/search", { templateurl: "pic.html" }).             when("/viplist", { templateurl: "cust.html" }).             otherwise({ redirectto: "/", templateurl: "pic.html" });     }]     ) 

you're not specifying controllers within routes. in order search code executed, need invoke search factory within child controller. also, first route redundant otherwise() call.

this plunker taken angularjs documentation should out.