data-ng-model and data-ng-change are not working with data-ng-selected
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var appCompAssets = angular.module('app.company.assets', []);

appCompAssets.controller('locationDetailCTRL', function($scope, $http) {
  // LOAD LOCATION DETAILS

  $scope.loadBranches = function() {

    $http.get('../getBranches_id_name/' + $scope.compid)
      .then(
        function(response) {
          if (response.data.length !== 0) {
            $scope.getBranches_id_name = response.data;
            console.log($scope.getBranches_id_name);
          }
        },
        function(response) {
          // error handling routine
          console.log('$Error: no data for branch id &amp; name');
        });
  };

  $scope.loadLocations = function(branch_id) {
    $scope.branchid = branch_id;
    $http.get('../getLocations_id_name/' + $scope.branchid)
      .then(

        function(response) {

          if (response.data.length !== $scope.branchid) {
            $scope.getLocations_id_name = response.data;
            console.log($scope.getLocations_id_name);
          }

        },
        function(response) {
          // error handling routine
          console.log('$Error: no data for location id &amp; name');
        });
  };
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div data-ng-app="app.company.assets" data-ng-controller="locationDetailCTRL"&gt;

  &lt;div class="row" data-ng-init="loadBranches()"&gt;
    &lt;div class="col-sm-12"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="branch_id" class="small"&gt;&lt;i&gt;Branch&lt;/i&gt;
        &lt;/label&gt;
        &lt;select class="form-control input-sm" data-ng-init="loadLocations(assetInfo.branch_id)" data-ng-change="loadLocations(assets.branch_id)" id="branch_id" name="branch_id" data-ng-model="assets.branch_id"&gt;
          &lt;option data-ng-selected="assetInfo.branch_name ===b.branch_name" data-ng-repeat="b in getBranches_id_name" value="{{b.id}}"&gt;{{b.branch_name}}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;

    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="row"&gt;
    &lt;div class="col-sm-12"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="location_id" class="small"&gt;&lt;i&gt;Location&lt;/i&gt;
        &lt;/label&gt;

        &lt;select class="form-control input-sm" id="location_id" name="location_id"&gt;
          &lt;option value=""&gt;&lt;/option&gt;
          &lt;option data-ng-repeat="l in getLocations_id_name" value="{{l.id}}" data-ng-selected="l.location_name == assetInfo.location_name"&gt;{{l.location_name}}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Guys, I am having problem with making data-ng-selected, data-ng-model and data-ng-change work at the same time. </p>

<p>if without the data-ng-model and data-ng-change</p>

<p>the data-ng-selected is working fine.</p>

<p>Excluded data-ng-model and data-ng-change and remain only data-ng-selected, the output is as below:</p>

<p><a href="https://i.stack.imgur.com/VzNP5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VzNP5.png" alt="enter image description here"></a></p>

<p>Although, it is able to display the value wanted, when changing the branch(dropdown), the location(s) for the respective branch won't change since there are no ng-change and ng-model exist.</p>

<p>However, if with all the above mentioned data-ng attribute together(data-ng-model,ng-change and ng-selected), it will not display properly as the branch is not selected which it supposed to be selected. The output is as below:</p>

<p><a href="https://i.stack.imgur.com/RuXnp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RuXnp.png" alt="enter image description here"></a></p>

<p>for changing the branch and the location will change, that part is working fine. </p>

<p>Your kind assistance will be appreciated. Thank you!.</p>

<p>The response result on the top is for branch and the one at the bottom is for location. Thank you. </p>

<p><a href="https://i.stack.imgur.com/flJSk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/flJSk.png" alt="Response result"></a></p>