How to refresh dropdown on unchecking the checkbox in AngularJS

Question

Guys I am having a problem in selecting a dropdown list. I want to refresh my dropdown list from an array in angularJS when I uncheck the checkbox. Basically I am trying to develop a form in which I will select a value holding company in dropdown and my all dropdown gets disabled and my checkbox gets checked. When I release my selected value in dropdown remains same. I want to refresh my dropdown when i uncheck the chekbox.

Here is the code.

<div class="col-md-6 col-sm-6">
                <select id="dropdown1" ng-model="of" class="form-control col-md-7 col-xs-12" ng-click="dropdown()">
                    <option ng:repeat=" officet in officetypes" value="{{officet.headoffice}}">{{officet.headoffice}}</option>
                </select>
            </div>
<input id="Checkbox1" ng-model="checkboxvalue" type="checkbox" name="abc" value="bca" ng-click="check()" />Is Main Entity

$scope.officetypes = [
        {
            headoffice: 'Branches',
            description: 'Branches'
        },
        {
        headoffice: 'Holding Company',
        description: 'Holding Company'
    },
    {
        headoffice: 'Subsidiaries',
        description:'Subsidiaries'
    },
    {
    headoffice: 'Ware house',
    description: 'Ware house'
    }];
$scope.check = function () {
        alert($scope.checkboxvalue + " Checked");
        //document.getElementById('dropdown1').disabled = true;
        if ($scope.temp === 0) {
            document.getElementById('dropdown1').disabled = true;
            document.getElementById('Dropdown2').disabled = true;
            document.getElementById('Dropdown3').disabled = true;
            $scope.temp = 1;
        }
        else if ($scope.temp === 1) {
            document.getElementById('dropdown1').disabled = false;
            document.getElementById('Dropdown2').disabled = false;
            document.getElementById('Dropdown3').disabled = false;
            document.getElementById('dropdown1').selectedIndex = 1;
            $scope.temp = 0;
        }
        else if ($scope.temp === 2) {
            document.getElementById('dropdown1').disabled = false;
            document.getElementById('Dropdown2').disabled = false;
            document.getElementById('Dropdown3').disabled = false;
            $scope.temp = 0;
        }
    }
$scope.dropdown = function () {
        if ($scope.of === 'Holding Company') {
            $scope.checkboxvalue = true;
            document.getElementById('dropdown1').disabled = true;
            document.getElementById('Dropdown2').disabled = true;
            document.getElementById('Dropdown3').disabled = true;
            document.getElementById('Checkbox1').checked = true;
            $scope.temp = 2;
            alert($scope.temp);
            temp = 0;
        }
        else if ($scope.of !== 'Holding Company') {
            $scope.checkboxvalue = false;
            document.getElementById('dropdown1').disabled = false;
            document.getElementById('Dropdown2').disabled = false;
            document.getElementById('Dropdown3').disabled = false;
            $scope.temp = 0;
        }
        if ($scope.of === 'Subsidiaries') {
            document.getElementById('Dropdown3').disabled = true;
        }
        if ($scope.of === 'Branches') {
            document.getElementById('dropdown1').disabled = false;
            document.getElementById('Dropdown2').disabled = false;
            document.getElementById('Dropdown3').disabled = false;
        }
    }

Answer 1

you can check this answer this may help for you

$scope.of = 0 ; 

This modal value as zero for reset your drop down

http://plnkr.co/edit/h5em3jDXr049LOe86Fvm?p=preview

Answer 2

You can use $watch to check updating for checkbox model value Just like, in your angular controller you should write

$scope.$watch('checkboxvalue', function(newVal, oldVal) {
    if(newVal != oldVal){
        // re-assign value for officetypes (ng-repeat)
    }
});

I hope it'll work.