Show “All”, “Multiple” or “one” based on number of dropdown selections in Angularjs

I have a checkbox list of locations which comes up in a pop-up allowing them to select one, multiple or all location. The default label of dropdown is “Select Locations“.

How do I handle following scenarios:

1. Display “All” in the dropdown selection if user selects “select all” from the list.

2. Display “Multiple” if user selects more than one location.

3. Display “location name” if user selects only one location.

Here is the code that I am using to create dropdown and pop-up for list, but currently it displays only “Select Location(s)” no matter what user selects from dropdown.

 <div class="dropdown cp-dropdown">
        <div class="btn btn-default" data-toggle="dropdown">
            <!-- {{homeCtrl.newActivitySelectedLocation === '' ? 'Select Location' : homeCtrl.newActivitySelectedLocation.Name}}-->
            Select Location(s)
      

            <span class="pull-right caret"></span>
        </div>
        <div id="location-list" class="dropdown-menu cp-checkbox-dropdown menu-container" role="menu" ng-click="$event.stopPropagation();">
            <div>
                <input type="text" ng-model="homeCtrl.newActivitySearchLocation" />
            </div>
            <div id="location-list-container">
                <div class="row" ng-if="homeCtrl.newActivityLocationList.length > 0">
                    <label class="cp-checkbox">
                        <input value="ALL" type="checkbox" id="select_all_locpop" ng-model="homeCtrl.newActivityLocationSelectAll" ng-click="homeCtrl.newActivityLocationFilter('All', homeCtrl.newActivityLocationSelectAll)" />
                        <span></span>Select All
                    </label>
                </div>
                <div id="location-list-pop">
                    <div class="row" data-ng-repeat="location in homeCtrl.newActivityLocationList | filter: {'Name':homeCtrl.newActivitySearchLocation}">
                        <label class="cp-checkbox">
                            <input value="{{location.Id}}" type="checkbox" ng-click="homeCtrl.updateActivityGrid('location-list-pop','select_all_locpop')" /><span></span>
                            {{location.Name}}
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer

Store your clicks in a temp list and update the label depending on the status between the main list and the temp.

var  updateLocationDisplay = function(){

  if(tempList.length === mainList.length){
    $scope.locationLabel = "All";
  }else if(tempList.length > 1){
    $scope.locationLabel = "Multiple";
  }else if(tempList.length === 1){
    $scope.locationLabel = tempList[0];
  }else{
    $scope.locationLabel = "Select a location";
  }
};

$scope.locationClick = function(name){
   var index = tempList.indexOf(name);
   if(index > 0){
     // remove it
     tempList.splice(index, 1);   
    }
   else{
    // add it
     tempList.push(name);
  }

   updateLocationDisplay();
 };

}