Getting Started

Include the required files

First things first:

<!DOCTYPE html>
<html ng-app="myApp" id="myApp">
    <head>
        ...
        <link rel="stylesheet" href="isteven-multi-select.css">
        ...
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
        <script src="isteven-multi-select.js"></script>      
        ...
    <head>

Initiate your AngularJs app & load the module

If you learn AngularJs from AngularJs' website, you should be familiar with this app.js file, in which you initiate your AngularJs app. So let's put our directive module there and load it, such as:

var myApp = angular.module( "myApp", [ "isteven-multi-select" ]);

In your controller

In your controller, define a $scope variable as the input-model. This is our "ng-model", so to speak.

Note The input-model has to be a one-dimensional (flat), array of objects.

$scope.modernBrowsers = [
    { icon: "<img src=[..]/opera.png.. />",               name: "Opera",              maker: "(Opera Software)",        ticked: true  },
    { icon: "<img src=[..]/internet_explorer.png.. />",   name: "Internet Explorer",  maker: "(Microsoft)",             ticked: false },
    { icon: "<img src=[..]/firefox-icon.png.. />",        name: "Firefox",            maker: "(Mozilla Foundation)",    ticked: true  },
    { icon: "<img src=[..]/safari_browser.png.. />",      name: "Safari",             maker: "(Apple)",                 ticked: false },
    { icon: "<img src=[..]/chrome.png.. />",              name: "Chrome",             maker: "(Google)",                ticked: true  }
];

In your view

Let's now define the directive with a minimum required configuration options.

As an attribute:

<div     
    isteven-multi-select
    input-model="modernBrowsers"
    output-model="outputBrowsers"
    button-label="icon name"
    item-label="icon name maker"
    tick-property="ticked"
>
</div>

... or as an element, but be careful with browser compatibility.

<isteven-multi-select    
    input-model="modernBrowsers"    
    output-model="outputBrowsers"
    button-label="icon name"
    item-label="icon name maker"
    tick-property="ticked"
>
</isteven-multi-select>

By now you should now have dropdown button like the one you saw earlier on the front page.

Getting the selected items

This should be obvious, but I got this question a lot, so:

angular.forEach( $scope.outputBrowsers, function( value, key ) {    
    /* do your stuff here */    
});

That's it! Go to the Configs & Options section to read more