The components model in Angular 1.5.x allows for encapsulation and interoperability of individual HTML elements. Previously in angular 1.4.x you could build components using .directive() method, with this method you could build custom HTML elements and attributes giving your application the modularity and encapsulation of DOM elements.

Prerequisites

• Angular 1.5+
• Bootstrap

Usage

Include the CSS and JS files. Make sure Angular and your app.js files are included first.

<link rel="stylesheet" href="dist/css/style.css">
				<script src="dist/js/multi-select.js"></script>
			

Add/customize this set of options as an object in your controller.

angular
			.module('app',['multiselectcomp'])
			.controller('demoController', demoController);

			function demoController (){
			    this.options = {
			        searchPlaceHolder: 'Typing to filter.',
			        labelAll: 'All Countries',
			        labelSelected: 'Selected Countries',
			        labelShow:'name', // label name to show
			        orderProperty: 'name',
			        items: [
			            {"name": "Afghanistan", "code": "AF"},
			            {"name": "Åland Islands", "code": "AX"},
			            {"name": "Albania", "code": "AL"},
			            {"name": "Algeria", "code": "DZ"},
			            {"name": "Martinique", "code": "MQ"},
			            {"name": "Mauritania", "code": "MR"},
			            {"name": "Mauritius", "code": "MU"},
			            {"name": "Mayotte", "code": "YT"},
			            {"name": "Uzbekistan", "code": "UZ"},
			            {"name": "Vanuatu", "code": "VU"},
			            {"name": "Venezuela", "code": "VE"},
			            {"name": "Viet Nam", "code": "VN"},
			            {"name": "Virgin Islands, British", "code": "VG"},
			            {"name": "Virgin Islands, U.S.", "code": "VI"},
			            {"name": "Wallis and Futuna", "code": "WF"},
			            {"name": "Western Sahara", "code": "EH"},
			            {"name": "Yemen", "code": "YE"},
			            {"name": "Zambia", "code": "ZM"},
			            {"name": "Zimbabwe", "code": "ZW"}
			        ],
			        selectedItems: []
			    };
			}
			

Add the directive tag in your HTML.

<multi-select options="$ctrl.options"><multi-select>