ng-selected is not working [duplicate] - angularjs

Question

This question already has answers here:
AngularJS: ng-selected doesn't show selected value [duplicate]
(2 answers)
Closed 4 years ago.
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">×</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">
<span class="fa fa-plus fa-200px"></span> Add New Record
</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>