ng-if is not working with select ngmodel value

Question

Iam working on ionic project.Here Iam trying to display some data on selection of options.I have written code in the way that when user selects all the 3 select options,then a form has to be appeared with some data.I have taken the ngmodel for 3 select options and after choosing 3rd select option,form should be appear,for that I used the 3rd select option ng-model in the ng-if for the div tag.But it's not working.Below is my code:

<div class="row form-group" ng-controller="myProfileCtrl">
                <div class="col-md-3 col-sm-4 col-xs-6 margin1">
                    <select class="form-control" ng-change="loadtypes()" ng-model="selectedIndustry" ng-options="industry for industry in name">
                        <option value="">Select Industry</option>
                    </select>
                </div>
                <div class="col-md-3 col-sm-4 col-xs-6 margin1">
                    <select class="form-control" ng-change="loadProducts()" ng-model="selectedtype" ng-options="make_year.make_year for make_year in makeYear">
                        <option value="">Select Type</option>
                    </select>
                </div>
                <div class="col-md-3 col-sm-4 col-xs-6 margin1">
                    <select class="form-control" ng-change="loadServices()" ng-model="selectedProduct" ng-options="car_model.car_model for car_model in carModel">
                        <option value="">Select Product</option>
                    </select>
                </div>
            </div>
            <!--Table or div-->
            
            <div ng-if="selectedProduct">
                <form class="form-group">
                    <div class="row">
                        <div class="col col-33">
                            <b>Service Issue</b>
                        </div>
                        <div class="col col-33">
                            <b> Tick</b>
                        </div>
                        <div class="col col-33">
                            <b> Cost</b>
                        </div>
                    </div>
                    <div class="row" ng-repeat="services in serviceData" style="margin-bottom:5px;">
                        <div class="col col-33">
                            <label>{{services.services}}</label>
                        </div>
                        <div class="col col-33">
                            <input type="checkbox" value="" ng-model="checks[$index]" />
                        </div>
                        <div class="col col-33">
                            <input class="form-control" type="text" style="width:100px;" ng-model="inputs[$index]" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-50">
                            <b>Service Request</b>
                        </div>
                        <div class="col col-50">
                            <b> Tick</b>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-50">
                            <label>First Response</label>
                        </div>
                        <div class="col col-50">
                            <input type="checkbox" ng-model="ser.firstResponse" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-50">
                            <b>Location</b>
                        </div>
                        <div class="col col-50">
                            <input class="form-control" list="places" name="location" ng-model="ser.location" />
                            <datalist id="places">
                                <option value="Kochi-Kerala">
                                    <option value="Pune-Maharastra">
                                        <option value="Bangalore-Karnataka">
                                            <option value="Hyderabad-Telangana">
                            </datalist>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-50">
                            <b>Resolution Time</b>
                        </div>
                        <div class="col col-50">
                            <input type="number" class="form-control" min="1" ng-model="ser.resolution" />

                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-50">
                            <b>Prioritized preferred partners</b>
                        </div>
                        <div class="col col-50">
                            <input type="checkbox" ng-model="ser.partners" />
                        </div>
                    </div>

                </form>
                <button type="button" class="btn btn-primary" ng-click="add()">Save</button>

            </div>

How can I display the data in the form after selection of options in angularjs?

Answer 1

would you write the value of carModel , because I test your code with my value and its OK, look at html:

<select class="form-control" ng-change="loadServices()" ng-model="selectedProduct" ng-options="item.label for item in items">
    <option value="">Select Product</option>
</select>
<div ng-if="selectedProduct">
    mozhdeh
</div>

and controller :

    $scope.items = [{
    id: 1,
    label: 'aLabel',
    subItem: { name: 'aSubItem' }
}, {
    id: 2,
    label: 'bLabel',
    subItem: { name: 'bSubItem' }
}];