Reset Model Value On Cascaded DropDown Change - angularjs

Question

I have two drop downs .One to show departments and other to show sections on change of department .
<div class="row" ng-controller="cascaded as cas">
<div class="form-group">
<label for="select-department" class="control-label col-md-2">Department</label>
<div class="col-md-4">
<select id="select-department" class="form-control" name="department" ng-model="myModel.department"
ng-options="option.name for option in departments track by option.id">
<option value=""></option>
</select>
</div>
<label for="select-department" class="control-label col-md-2">Section</label>
<div class="col-md-4">
<select id="select-section" class="form-control" name="section" ng-model="myModel.section"
ng-options="option.name for option in sections track by option.id">
<option value=""></option>
</select>
{{myModel.section}}
</div>
</div>
</div>
It works fine for me . If I change department all respective section gets updated and if I select any section respective section also gets assigned to the model . But the problem is if second time I change my department value, section drop down gets updated the model value doesn't reset to blank . It still shows the last selected value .
var app = angular.module("mainApp", []);
angular.module("mainApp").controller("cascaded", function ($scope, $filter) {
$scope.departments = [
{
id: 1, name: "Dep A"
}, {
id: 2, name: "Dep B"
}, {
id: 3, name: "Dep C"
}];
var sections = [
{
id: 1, name: "Sec A", parentId: 1
}, {
id: 2, name: "Sec B", parentId: 2
}, {
id: 3, name: "Sec C", parentId: 3
}];
$scope.$watch("myModel.department", function (newVal) {
if (newVal) {
$scope.sections = $filter("filter")(sections, { parentId: newVal.id });
}
});
})
I want to reset my model value when section drop down gets refreshed with new data .

Answer 1

You need to assign the sections value to your mymodel.section value
$scope.myModel.section= $scope.sections;
Because $scope.myModel.section is does not update, when you changing the department,
Your watch event should be
$scope.$watch("myModel.department", function (newVal) {
if (newVal) {
$scope.sections = $filter("filter")(sections, { parentId: newVal.id });
**$scope.myModel.section= $scope.sections;**
}
});
Fiddler Demo

Answer 2

Simply put one method in ng-change of department like:
<select id="select-department" class="form-control" name="department" ng-model="myModel.department"
ng-options="option.name for option in departments track by option.id" ng-change="setBlank()">
<option value=""></option>
</select>
And in the method setBlank() set myModel.section to blank like this:
$scope.setBlank=function(){
$scope.myModel.section='';
}