title: How to set value and populate dropdown using angularjs?
body: <p>How to set value and populate dropdown using angularjs? </p>
  
  <p>I have succesfully setup the option in both dropdowns.</p>
  
  <p>In my dropdown one is dependent to another</p>
  
  <p>Suppose in my database Parent name is Sally and child name is SallyChild2,when an updating this page, i need to populate the entire data 
  with select this particular parent name as Sally and childname as SallyChild2</p>
  
  <p>My database value is Parent - Sally and Child - SallyChild2 </p>
  
  <p>So i want to change Child - SallyChild1</p>
  
  <p>So I hard coded as this wat but not working</p>
  
  <pre><code>$scope.selectedParent="Sally";
  $scope.selectedChild="SallyChild2";
  </code></pre>
  
  <p>But its not working</p>
  
  <p>Here is my complete code</p>
  
  <p>This is my script.js</p>
  
  <p>script.js</p>
  
  <pre><code>var app=angular.module('TestApp', ['angular.filter','ui.router']);
  
  app.config(function($stateProvider, $urlRouterProvider) {
  
      $urlRouterProvider.otherwise('/');
  
      $stateProvider
      .state('category',
      {
      views : {   
          "body" :
      {
          url : '/category',
          templateUrl : 'category.html',
          controller : 'TestController'
      }
      }   
  
      })
  
      .state('category.subcategory',
      {
      url : '/subcategory',
      views : {                              
      "subbody@category" :
      {
      templateUrl : 'sample.html',
      controller : 'SampleController'              
      }
      }
      })
  });
  
  app.controller('MainController', MainController);
  
  function MainController($scope,$state)
  {
      alert("This is MainController")
  
      $scope.getCategory=function()
      {
      $state.go('category');
      }
  
  
  }
  
  app.controller('TestController', TestController);
  
  //TestController.$inject['dataservice'];
  
  function TestController($scope, $state){
  
  
      $scope.data=[
       {
        "parentName": "George",
        "childName": "George Child1"          
       },
       {
        "parentName": "Folly",
        "childName": "FollyChild1"         
       },
       {
        "parentName": "Sally",
        "childName": "Sally Child1"          
       },
  
       {
        "parentName": "George",
        "childName": "GeorgChild2"          
       },
       {
        "parentName": "Folly",
        "childName": "FollyChild2"         
       },
       {
        "parentName": "Folly",
        "childName": "Infant Food"          
       },
       {
        "parentName": "Sally",
        "childName": "SallyChild2"          
       }
      ];
  
      $scope.selectedParent="Sally";
      $scope.selectedChild="SallyChild2";
  
      function onParentChange(parent){
        if(!parent){
      $scope.child = undefined;
        }
      }
  
  
      $scope.getValue=function()
      {
      alert("Call to Sample Controller")
  
      var currentState = $state.current.name;
      var targetState = 'category.subcategory';
  
      if(currentState === targetState)
        $state.go($state.current, {}, {reload: true});
      else
      $state.go(targetState);
      $state.go(".subcategory");
  
      //$state.go('category.subcategory');
      }
  }
  
  
  app.controller('SampleController', SampleController);
  
  function SampleController($scope,$state)
  {
      alert("This is SampleController")
  
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="TestApp"&gt;
  
    &lt;head&gt;
      &lt;link rel="stylesheet"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"&gt;&lt;/script&gt;
          &lt;script src="angular-ui-router.js"&gt;&lt;/script&gt;    
          &lt;script src="script.js"&gt;&lt;/script&gt;
          &lt;script src="angular-filter.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
      &lt;body ng-controller="MainController"&gt;
          &lt;a href="#" ng-click="getCategory()"&gt;Click to Category&lt;/a&gt;
          &lt;div ui-view="body"&gt;&lt;/div&gt;  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>category.html</p>
  
  <pre><code>  &lt;div&gt;    
      &lt;hr&gt;
  
      &lt;div class="col-md-3"&gt; 
        &lt;form&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="exampleSelect1"&gt;&lt;b&gt;Parent&lt;/b&gt;&lt;/label&gt;
        &lt;select ng-model="selectedParent"
          ng-init="selectedParent = null"
          ng-change="onParentChange(selectedParent)"
          class="form-control" id="data"&gt;
          &lt;option value=""&gt;--Select--&lt;/option&gt;
          &lt;option ng-repeat="(key,value) in data | orderBy:'parentName'| groupBy:'parentName'"&gt;{{key}}&lt;/option&gt;           
        &lt;/select&gt;
      &lt;/div&gt;              
        &lt;/form&gt;  
      &lt;/div&gt;      
      &lt;div class="col-md-3"&gt;      
        &lt;form&gt;    
      &lt;div class="form-group"&gt;
        &lt;label for="exampleSelect1"&gt;&lt;b&gt;Child Names&lt;/b&gt;&lt;/label&gt;
        &lt;select class="form-control" id="childnames" ng-model="child" 
          ng-disabled="!selectedParent"
          ng-options="data.childName for data in data| filter: {parentName:selectedParent} | removeWith:{childName : 'Infant Food'}" ng-change="getValue()"&gt;
          &lt;option value=""&gt;--Select--&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;          
  
        &lt;/form&gt;     
    &lt;/div&gt;
      &lt;div ui-view="subbody"&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>sample.html</p>
  
  <pre><code>&lt;div&gt;
      Sample Controller
  &lt;/div&gt;
  </code></pre>