Angular: Empty Fiddle

http://angularjs.org/

by jlaw

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.24/angular.min.js"></script>
<div ng-controller="MyCtrl">
    <table id="attributes" class="table table-striped table-bordered">
        <tbody>
            <tr>
                <th>Attribute Type</th>
                <th>Attribute Code</th>
            </tr>
            <tr class="ng-scope" ng-repeat="attribute in attributes">
                <td>
                    <multiselect ng-disabled="(component.component.approvalState && component.component.approvalState !=='N')" ng-if="attribute.allowMultipleFlg" on-change="vitalsCheck()" selected="component.attributes[attribute.attributeType]" options="code as code.label for code in list" list="attribute.codes"></multiselect>
                </td>
                <td>
                    <div>{{component.attributes[attribute.attributeType]}}</div>
                </td>
            </tr>
        </tbody>
</div>

JavaScript

var myApp=angular.module("myApp",[]).run(["$templateCache",function(c){c.put("multiselect/select.tmp.html",'<div><select ng-disabled="ngDisabled" class="form-control" ng-model="selection" ng-options="{{options}}" ng-change="addToSelection(selection)"><option value=""></option></select></div>')}]).controller("MyCtrl",["$scope","$timeout","$q",function(c,d,a){c.name="Superhero";c.component={component:{approvalState:"N"},attributes:{}};d(function(){c.attributes=[{attributeType:"type",codes:[{label:"APP"},
{label:"DOC"},{label:"OTH"}],allowMultipleFlg:!0},{attributeType:"license",codes:[{label:"OPENSRC"},{label:"GOVUNL"},{label:"OTH"}],allowMultipleFlg:!0},{attributeType:"test",codes:[{label:"APP"},{label:"DOC"},{label:"OTH"}],allowMultipleFlg:!1}];d(function(){c.component.attributes={type:{data:"type"},license:{data:"license"},test:{data:"test"}}},300)},100);c.vitalsCheck=function(a){console.log("Item Added")}}]).directive("multiselect",["$templateCache","$timeout",function(c,d){return{restrict:"E",
replace:!0,scope:{selected:"=",list:"=",ngDisabled:"=",options:"@",onChange:"&"},template:c.get("multiselect/select.tmp.html"),link:function(a,c,d){a.addToSelection=function(b){a.ngDisabled||(a.selected=a.selected&&a.selected.constructor===Array?a.selected:[],_.contains(a.selected,b)||!b?"":a.selected.push(b),a.onChange(!0))};a.removeItem=function(b){if(!a.ngDisabled){if(b=_.find(a.selected,{label:b.label}))b=_.indexOf(a.selected,b),a.selected.splice(b,1);if(0===a.selected.length){b=c.find("select")[0].options;
for(var d=0;d<b.length;d++)b[d].selected=!1}}}}}}]);