AngularJS Hello World

In this example, we do a very simple AngularJS example.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<multi-select-list datasource="turbineNumbersDistinct" datasource-selected="output"></multi-select-list>
{{output}}
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
$scope.output = [];
$scope.turbineNumbersDistinct = [{Name: 1},
																	{Name: 2},
                                  {Name: 3},
                                  {Name: 4}];
}).directive("multiSelectList", function () {
    return {
        scope: {
            datasource: "=",
            datasourceSelected: "="
        },
        template: 
        "<div class='col-md-12'> \
            <div class='button-group'> \
                <button type='button' class='btn btn-default btn-block btn-sm dropdown-toggle' data-toggle='dropdown'><span class=''>TurbineNumber</span> <span class='caret'></span></button> \
                <ul class='dropdown-menu' style=''> \
                    <li style='padding-left:10px;' ng-repeat='c in datasource'> \
                        <label style='font-weight:100;'> \
                            <input type='checkbox' ng-model='selected[$index]' ng-change='selected[$index] ? datasourceSelected.push(c.Name): datasourceSelected.splice(datasourceSelected.indexOf(c.Name), 1)' />&nbsp;{{c.Name}} \
                        </label> \
                    </li> \
                </ul> \
            </div> \
        </div>"
    };
});