$state.go() is not refreshing in AngularJS? - angularjs

Question

How to reload nested state of different controller when changing selectbox content in AngularJS?
I have 2 select boxes 1.Category and 2.SubCategory
Based on the category and subcategory, Products will be displayed on the inner state
category and subcategory come under addproducts state
products come under .productsettings state inside the addproducts state
But my problem is when I select both category and subcategory the product will be displayed that means
$state.go('addproducts.productsettings');
will work,But after selecting both after that when i change only subcategory selectbox it won't reload product state
$state.go('addproducts.productsettings');
will not work that wont load in ProductSettingsController
This is my html code it contains two select boxes
<form>
<div class="form-group">
<label for="exampleSelect1"><b>Category</b></label>
<select ng-model="selectedCategory" class="form-control" id="categories" ng-init="selectedCategory = null"
ng-change="onCategoryChange(selectedCategory)">
<option value="">--Select--</option>
<option ng-repeat="(key,value) in categories | orderBy:'catName'| groupBy:'catName'">{{key}}</option>
</select>
</div>
</form>
<!-- ----------------------------------- -->
</div>
<div class="col-md-3">
<!-- ----------------------------------- -->
<form>
<div class="form-group">
<label for="exampleSelect1"><b>SubCategory</b></label>
<select class="form-control" id="subcategories" ng-model="selectedSubCategory" ng-disabled="!selectedCategory"
ng-options="categories.subCatName for categories in categories | filter: {catName:selectedCategory}" ng-change="getValue()">
<option value="">--Select--</option>
</select>
</div>
</form>
<!-- ----------------------------------- -->
</div>
This is my js code
var appshop = angular.module('appShop', [ 'ui.router', 'angular.filter' ]);
appshop.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/category');
$stateProvider.state('addproducts',
{
url : '/addproducts',
views :
{
'body' :
{
templateUrl : 'category/manageproduct.htm',
controller : 'AddProductController'
}
}
})
.state('addproducts.productsettings',
{
url : '/productsettings',
views :
{
'productsbody#addproducts' :
{
templateUrl : 'category/productsettings.htm',
controller : 'ProductsSettingsController'
}
}
})
});
//==========================================================
appshop.controller('AddProductController',AddProductController);
function AddProductController($scope, $http,$state)
{
$scope.onCategoryChange = function(category)
{
if (!category)
{
$scope.selectedSubCategory = undefined;
}
}
var categoryPromise = $http.get("../rest/mcategory");
categoryPromise.success(function(data, status, headers, config)
{
$scope.categories=data;
});
categoryPromise.error(function(data, status, headers, config)
{
alert("Error");
});
$scope.getValue=function()
{
$state.go('addproducts.productsettings');
}
}
//==========================================================
appshop.controller('ProductSettingsController',ProductSettingsController);
function ProductSettingsController($scope,$http,$state)
{
alert("Clicked")//I need to get alert here
}
That two select boxes are come under AddProductController
And products are comed under nested state of this AddProductController it is named as ProductSettingsController
When i select both category and subcategory it works fine
But after selcting both then only to changed subcategory it wont works
Any idea for getting product details when i select subcatname? I need to get alert Clicked in ProductSettingsController when i changed in subcategory selectbox

Answer 1

use $stateParams means parameters in url: look
HTML SubCategory section
<!-- ----------------------------------- -->
<form>
<div class="form-group">
<label for="exampleSelect1"><b>SubCategory</b></label>
<select class="form-control" id="subcategories" ng-model="selectedSubCategory" ng-disabled="!selectedCategory"
ng-options="categories.subCatName for categories in categories | filter: {catName:selectedCategory}" ng-change="getValue(selectedSubCategory)">
<option value="">--Select--</option>
</select>
</div>
</form>
<!-- ----------------------------------- -->
JS add stateParams in substate
.state('addproducts.productsettings',
{
url : '/productsettings?:subitem',
views :
{
'productsbody#addproducts' :
{
templateUrl : 'category/productsettings.htm',
controller : 'ProductsSettingsController'
}
}
})
Controller
$scope.getValue=function(sub_item)
{
$state.go('addproducts.productsettings', {subitem:sub_item});
}

Answer 2

try:
$state.reload();
or
$state.go('addproducts.productsettings', {}, {reload: true});