get the value in element value and use it in ng-if

Question

I have my 2 dropdown here. My problem is, I just want to get the element value in province dropdown and pass the variable in ng-if at the city dropdown. for example the value of the selected province is 3 then the ng-if is value === province.city.province_id. please help. thanks.

 $http.get(API_URL + "/register").then(function(response) { $scope.countries = response.data['countries']; $scope.provinces = response.data['provinces']; //alert(response.data['provinces'].toSource()); /*$('select[id=selProvince]').change(function() { var tempProv = $(this).val(); });*/ }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="form-group form-group-default"> <label class="">Province</label> <select id="selProvince" class="full-width" data-placeholder="Select Province" data-init-plugin="select2" tabindex="-1" title=""> <option ng-repeat="province in provinces" value="{{province.id}}">{{province.name}}</option> </select> </div> <div class="form-group form-group-default"> <label class="">City</label> <select id="selCity" class="full-width" data-placeholder="Select City" data-init-plugin="select2" tabindex="-1" title=""> <option ng-repeat="province in provinces" ng-if="value === province.city.province_id" value="{{province.city.id}}">{{province.city.name}}</option> </select> </div> 

Answer 1

Use ng-model

<div class="form-group form-group-default">
     <label class="">Province</label>
     <select id="selProvince" class="full-width" ng-model="selProvince" data-placeholder="Select Province" data-init-plugin="select2" tabindex="-1" title="">
        <option ng-repeat="province in provinces" value="{{province.id}}">{{province.name}}</option>
     </select>
</div>

<div class="form-group form-group-default">
     <label class="">City</label>
     <select id="selCity" class="full-width" data-placeholder="Select City" data-init-plugin="select2" tabindex="-1" title="">
         <option ng-repeat="province in provinces" ng-if="selProvince === province.city.province_id" value="{{province.city.id}}">{{province.city.name}}</option>

     </select>
</div>

Answer 2

You need to use ng-model.

<select id="selProvince" class="full-width" data-placeholder="Select Province" data-init-plugin="select2" tabindex="-1" title="" ng-model="provinceSelected">

<option ng-repeat="province in provinces" value="{{province.id}}">{{province.name}}</option>

Then in second select box

<option ng-repeat="province in provinces" ng-if="provinceSelected === province.city.province_id" value="{{province.city.id}}">{{province.city.name}}</option>

Answer 3

Its working now thanks to all who answer :) you guys rock! this what I did

  $http.get(API_URL + "/register").then(function(response) { $scope.countries = response.data['countries']; $scope.provinces = response.data['provinces']; $scope.cities = response.data['cities']; //alert(response.data['provinces'].toSource()); /*$('select[id=selProvince]').change(function() { var tempProv = $(this).val(); });*/ }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="form-group form-group-default"> <label class="">Province</label> <select id="selProvince" class="full-width" ng-model="selProvince" data-placeholder="Select Province" data-init-plugin="select2" tabindex="-1" title=""> <option ng-repeat="province in provinces" value="{{province.id}}">{{province.name}}</option> </select> </div> <div class="form-group form-group-default"> <label class="">City</label> <select id="selCity" class="full-width" data-placeholder="Select City" data-init-plugin="select2" tabindex="-1" title=""> <option ng-repeat="city in cities" ng-if="selProvince == city.province_id" value="{{city.id}}">{{city.name}}</option> </select> </div> 

then my laravel controller is:

$country = Country::All();
$province = Province::All();
$city = City::All();
return array('countries'=>$country , 'provinces'=>$province , 'cities'=>$city);

thank you again.