Angularjs : Texbox value not showing

Question

In agularjs controller I am creating variable

var search = [];
search.area = 'xyz';
$scope.search = search;

And in html page

 <input type="text" name="area" class="form-control" data-ng-model="search.area" placeholder="Area">

So, after loading the page default value doesn't being display as 'xyz' in textbox.

Please guide !!

Answer 1

There is some problem with your controller:-) Your code is working fine

<div ng-app="myApp" ng-controller="MyCtrl"><input type="text" name="area" class="form-control" data-ng-model="search.area" placeholder="Area"/>

    </div>
<script>
    var myApp = angular.module('myApp',[]);
    function MyCtrl($scope) {
    var search = [];
    search.area = 'xyz';
    $scope.search = search;
    }
</script>

Fiddle:- http://jsfiddle.net/4rwnefnL/

Answer 2

I think you are missing angular library Or controller is different in which you are declaring search variable.

Or Might be ng-app="myApp" (tell angular to initialize on page) is missing from your HTML.

Always do follow modular approach in angular by creating module.

angular.module('myApp', [])
.controller('mainCtrl', function($scope){
  // controller code here
})
.directive('myDir', function(){
  return {
    //directive code here
  }
})
.filter('customfilter', function(){
  return function(val){
    //filter code here
  }
})
.factory('customFactory', function(){
  return function(val){
    //filter code here
  }
})

Follow above code to design angular app.

Working Fiddle