ng-selected is not working

Question

ng-selected is not working

i select the record for the monitors

and modal opens up with the data for that specific record but combo is not selected

but when i inspect the html it ng-selected is true.

here is the code for html

<h1>Product</h1>

<div id="addProductModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="hModalh4Prod" >Add Product</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label col-md-3">Product Name</label>
                            <input class="form-control" type="text" name="txtproductname" id="txtproductname" maxlength="200" ng-model="vm.product.productName" />
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-md-3">Category Name</label>
                            <!--<input class="form-control col-md-9" type="text" name="txtcategoryname" id="txtcategoryname" maxlength="200" ng-model="vm.category.CategoryName" />-->
                            <select id="cmbcategory" name="cmbcategory" class="form-control" ng-model="vm.product.categoryId">
                                <option ng-repeat="cat in vm.Category" 
                                        ng-selected="{{cat.categoryID == vm.product.categoryId}}"
                                        value="{{cat.categoryID}}">
                                    {{cat.categoryName}}
                                    {{cat.categoryID == vm.product.categoryId}}
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label  col-md-3">Product Price</label>
                            <input class="form-control" type="number" name="txtptoductprice" id="txtptoductprice" maxlength="200" ng-model="vm.product.productPrice" />
                        </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.reset()">Close</button>
            <button type="button" id="btnSubmitProd" class="btn btn-primary" ng-disabled="!(vm.product.productName && vm.product.productPrice)" ng-click="vm.add()">Add</button>
        </div>
    </div>
</div>
</div>

<div class="row">
    <div class="col-md-12 col-md-offset-10">
        <a href="" ng-click="vm.openAddProductModal()"><span class="fa fa-plus fa-200px"></span> Add New Record</a>
    </div>
</div>


<table class="table table-responsive table-hover">
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Category Name</th>
            <th>Product Price</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="prod in vm.Products">
            <td style="vertical-align:middle">{{prod.productName}}</td>
            <td style="vertical-align:middle">{{prod.category.categoryName}}</td>
            <td style="vertical-align:middle">{{prod.productPrice}}</td>
            <td>
                <input type="button" class="btn btn-sm btn-primary" ng-click="vm.edit(prod.productID)" value="Edit" />
                <input type="button" class="btn btn-sm btn-primary" ng-click="vm.delete(prod.productID)" value="Delete" />
            </td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">

    $(document).ready(function () {
        console.log("In document ready");

    });

</script>

and here is the controller

(function () {
    'use strict';

    app.controller('productController', ['$http', '$location', 'authService', 'ngWEBAPISettings', productController]);

    ///productController.$inject = ['$location']; 

    function productController($http, $location, authService, ngWEBAPISettings) {
        /* jshint validthis:true */
        ////debugger;
        var vm = this;
        vm.title = 'Product';

        var d = new Date();

        //Creating headers for sending the authentication token along with the system.
        var authheaders = {};
        authheaders.Authorization = 'Bearer ' + authService.getToken();

        //For Cache needs to be updated
        var config = {
            headers: {
                'Authorization': authheaders.Authorization
            },
            cache: false,
        };

        vm.Products = [];
        vm.Category = [];

        vm.product = {
            categoryId: 0,
            productID:0,
            productName: "",
            productPrice:0,
            createdOn: d,
            updatedOn:d
        };

        //For Populating the Category Combo
        vm.getCategory = function () {
            ////debugger;

            ////For Grid
            $http.get(ngWEBAPISettings.apiServiceBaseUri + "api/Categories?unique=" + new Date().getTime(), config)
            .then(function (respose) {
                ////success
                ////debugger;
                angular.copy(respose.data, vm.Category);
                ////failure;
                //var i = 2;
                ////debugger;
            }, function (response) {
                //failure
                ////debugger;
            }).finally(function () {
                ////debugger;
                //finally
            }
            );
        }

        ////For Grid.
        vm.getProducts = function () {
            ////debugger;

            ////For Grid
            $http.get(ngWEBAPISettings.apiServiceBaseUri + "api/Products?unique=" + new Date().getTime(), config)
            .then(function (respose) {
                ////success
                ////debugger;
                angular.copy(respose.data, vm.Products);
                ////failure;
                //var i = 2;
                ////debugger;
            }, function (response) {
                //failure
                ////debugger;
            }).finally(function () {
                ////debugger;
                //finally
            }
            );
        }

        //// For adding the new record.
        vm.add = function () {
            ////authheaders.Content-Type="application/x-www-form-urlencoded";
            ////debugger;
            ////alert('in add');

            vm.product.createdOn = d;
            vm.product.updatedOn = d;

            $http.post(ngWEBAPISettings.apiServiceBaseUri + "api/Products", JSON.stringify(vm.product), { headers: authheaders })
            .then(function (repose) {
                ////success
                ////debugger;
                vm.Products.push(repose.data);
                alert('Category has been addded successfully');
                $('#addProductModal').modal('hide');
            }, function (response) {
                ////failure
                ////debugger;
                alert('An error has been occurred while adding the data');
            }).finally(function () {
                vm.category = {};
            });
        }

        ////For showing the edit modal and do events setting to call update instead of add.
        vm.edit = function (id) {

            ///debugger;

            ////var id = vm.category.categoryID;
            ////vm.category = {};

            $http.get(ngWEBAPISettings.apiServiceBaseUri + "api/Products/" + id, config)
            .then(function (response) {
                //success
                debugger;
                //show modal
                $('#btnSubmitProd').html('Update');

                angular.element($("#btnSubmitProd")).off('click');
                angular.element($("#btnSubmitProd")).on('click', vm.editFinal);
                $('#hModalh4Prod').html('Edit Product');

                $('#addProductModal').modal('show');

                vm.product = response.data;
                ////vm.getCategory();

                //vm.category.CategoryID = response.data.categoryID;
                //vm.category.CategoryName = response.data.categoryName;
                //vm.category.CreatedOn = response.data.createdOn;
                //vm.category.UpdatedOn = response.data.updatedOn;

                ////categoryID = response.data.categoryID;
                //vm.category = {};


            }, function (response) {
                //failure
                debugger;
                alert('Unable to fetch the data for desired id.');
            }).finally(function () {


            })
        }

        ////For doing the final update of edited record and save it into the db.
        vm.editFinal = function () {
            ////debugger;
            //// alert('in update final' + categoryID);

            //goes in finally
            angular.element($("#btnSubmitProd")).off('click');
            angular.element($("#btnSubmitProd")).on('click', vm.add);



            $http.put(ngWEBAPISettings.apiServiceBaseUri + "api/Products/" + vm.category.CategoryID, JSON.stringify(vm.category), { headers: authheaders })
            .then(function (response) {
                //success
                ////debugger;
                updateProduct(vm.category.CategoryID, vm.category);
                alert('Record has been updated successfully');
                $('#addProductModal').modal('hide');
            }, function (response) {
                //failure
                /////debugger;
                alert('There has been error while updating the record');
            }).finally(function () {
                //final
                ////debugger;
                vm.category = {};
            })


        }

        vm.delete = function (id) {
            ////debugger;
            ///alert(id);
            if (confirm('Are you sure you want to save this thing into the database?')) {
                $http.delete(ngWEBAPISettings.apiServiceBaseUri + "api/Products/" + id, { headers: authheaders })
                    .then(function (reponse) {
                        ////debugger;
                        deleteProduct(id);
                        alert('Record has been delete successfully');
                    }, function (response) {
                        /////debugger;
                        alert('There is some problem in delete record');
                    }
                    ).finally(function () { })
            }
            else {
                // Do nothing!
            }
        }

        ////For resetting Product object after close of modal.
        vm.reset = function () {
            vm.category = {};
        }

        activate();
        function activate() {
            vm.getProducts();
            vm.getCategory();

            ////This event is fired immediately when the hide instance method has been called.
            ///called to reset the events and the headers.
            $('#addProductModal').on('hidden.bs.modal', function () {
                ////debugger;
                vm.category = {};
                $('#btnSubmitProd').html('Add');
                $('#hModalh4Prod').html('Add Category');

                angular.element($("#btnSubmitProd")).off('click');
                angular.element($("#btnSubmitProd")).on('click', vm.add);

                console.log("modal is closed hidden");
            })


            ////This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).
            ///called to reset the events and the headers.
            $('#addProductModal').on('hide.bs.modal', function () {
                ////debugger;
                vm.category = {};
                $('#btnSubmitProd').html('Add');
                $('#hModalh4Prod').html('Add Category');

                angular.element($("#btnSubmitProd")).off('click');
                angular.element($("#btnSubmitProd")).on('click', vm.add);

                console.log("modal is closed hide");
            })
        }

        ////update the product object in grid after update.
        function updateCategory(value, product) {
            for (var i in vm.Products) {
                if (vm.Products[i].productID == value) {

                    //var cat = {};

                    //cat.categoryID = category.CategoryID;
                    //cat.categoryName = category.CategoryName;
                    //cat.createdOn = category.CreatedOn;
                    //cat.updatedOn = category.UpdatedOn;

                    vm.Category[i] = product;
                    break; //Stop this loop, we found it!
                }
            }
        }

        function deleteProduct(value) {
            for (var i in vm.Products) {
                if (vm.Products[i].productID == value) {

                    delete vm.Products.splice(i, 1);
                    break; //Stop this loop, we found it!
                }
            }
        }

        vm.openAddProductModal = function ()
        {
            vm.product = {};
            $('#addProductModal').modal('show');
            $('#btnSubmitProd').html('Add');
            $('#hModalh4Prod').html('Add Product');
        }

    }
})();

Answer 1

it works after changing using ng-option by doing this

<select class="form-control col-md-9" ng-options="cat as cat.categoryName for cat in vm.Category track by cat.categoryID" ng-model="vm.product.category"></select>