angularjs angularjs-scope angularjs-ng-options

How to set value and populate dropdown using angularjs?

I have succesfully setup the option in both dropdowns.

In my dropdown one is dependent to another

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

My database value is Parent - Sally and Child - SallyChild2

So i want to change Child - SallyChild1

So I hard coded as this wat but not working

$scope.selectedParent="Sally";
$scope.selectedChild="SallyChild2";

But its not working

Here is my complete code

This is my script.js

script.js

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")

}

index.html

<!DOCTYPE html>
<html ng-app="TestApp">

  <head>
    <link rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
        <script src="angular-ui-router.js"></script>    
        <script src="script.js"></script>
        <script src="angular-filter.js"></script>
  </head>

    <body ng-controller="MainController">
        <a href="#" ng-click="getCategory()">Click to Category</a>
        <div ui-view="body"></div>  
    </body>
</html>

category.html

  <div>    
    <hr>

    <div class="col-md-3"> 
      <form>
    <div class="form-group">
      <label for="exampleSelect1"><b>Parent</b></label>
      <select ng-model="selectedParent"
        ng-init="selectedParent = null"
        ng-change="onParentChange(selectedParent)"
        class="form-control" id="data">
        <option value="">--Select--</option>
        <option ng-repeat="(key,value) in data | orderBy:'parentName'| groupBy:'parentName'">{{key}}</option>           
      </select>
    </div>              
      </form>  
    </div>      
    <div class="col-md-3">      
      <form>    
    <div class="form-group">
      <label for="exampleSelect1"><b>Child Names</b></label>
      <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()">
        <option value="">--Select--</option>
      </select>
    </div>          

      </form>     
  </div>
    <div ui-view="subbody"></div>
  </div>

sample.html

<div>
    Sample Controller
</div>

Solution

What you have really is an array of children. So, you set up your <select> tag like this:

<select ng-model="selectedChild" ng-options="child as child.childName for child in children"></select>

Now, your selectedChild model contains both parent name and child name. You do not need to separate the model into two.

The second part, in order to set your initial values, you need to make use of angular.equals() to your SallyChild2 target. Like this:

var target = {
      "parentName": "Sally",
      "childName": "SallyChild2"
};

for(var i = 0; i < $scope.children.length; ++i) {
  if(angular.equals($scope.children[i], target)) {
    $scope.children[i] = target;

    $scope.selectedChild = $scope.children[i];
  }
}

Here is a working Plunker: http://plnkr.co/edit/60ajq6KBmUKXuPeT6yI2?p=preview

To do this with two select dropdowns, simply do:

//parents dropdown
<select ng-model="selectedParent" ng-options="parent as parent.parentName for parent in data | unique: 'parentName'"></select>

//children dropdown
<select ng-model="selectedChild" ng-options="child as child.childName for child in getChildren(selectedParent)"></select>

Javascript:

$scope.getChildren = function(parent) {
    var children = [];

    for(var i = 0; i < $scope.data.length; ++) {
        if($scope.data[i].parentName === parent {
            children.push($scope.data[i]);
        }
    }

    return children;
}