Source Code

AngularJS Dropdown Multiselect Example

Multiselect dropdown with checkbox in angularjs Example

Pure simple AngularJS directive data which creates a select dropdown button with multiple option or single selections data.

selectedProgramming = {{selectedprogram}}

Example : index.html



<!DOCTYPE html>
<html lang="en">
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> 
</head>
<body>  
<div ng-app="liveApp">  
<div ng-controller="liveCtrl" class="livebox">  
 <label>Select Programming Languages:</label>
 <hr/>
    <select multiple ng-model="selectedprogram">
        <option value="1">Laravel</option>
        <option value="2">Angularjs</option>
        <option value="3">vuejs</option>
        <option value="4">Nodejs</option>
		<option value="5">PHP</option>
		<option value="6">Magento</option>
		<option value="7">jQuery</option>
		<option value="8">HTML</option>
		<option value="9">CSS</option>
    </select>
	<hr>
    <p style="color:green;">selectedProgramming = {{selectedprogram}}</p>
</div>  
</div> 
</body>  
</html>

Example : App.js


var liveApp = angular.module("liveApp", []);
 liveApp.controller("liveCtrl", function($scope) {
 $scope.selected = [
        {id:1, name:"Laravel"}
    ];
    
    $scope.selectedprogram = [];
    
    $scope.$watch('selected', function(nowSelected){
        $scope.selectedprogram = [];
        
        if( ! nowSelected ){
		    // if not selected then return
            return;
        }
        angular.forEach(nowSelected, function(val){
            $scope.selectedprogram.push( val.id.toString() );
        });
    });

});