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 ($templateCache) {
    $templateCache.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 ($scope, $timeout, $q) {
    $scope.name = 'Superhero';
    $scope.component = {
        component: {
            approvalState: 'N'
        },
        attributes: {}
    };
    $timeout(function () {

        $scope.attributes = [{
            attributeType: 'type',
            codes: [{
                label: 'APP'
            }, {
                label: 'DOC'
            }, {
                label: 'OTH'
            }],
            allowMultipleFlg: true,
        }, {
            attributeType: 'license',
            codes: [{
                label: 'OPENSRC'
            }, {
                label: 'GOVUNL'
            }, {
                label: 'OTH'
            }],
            allowMultipleFlg: true,
        }, {
            attributeType: 'test',
            codes: [{
                label: 'APP'
            }, {
                label: 'DOC'
            }, {
                label: 'OTH'
            }],
            allowMultipleFlg: false,
        }]
        $timeout(function () {
            $scope.component.attributes = {
                'type': [{"label":"APP"}],
                'license': [{"label":"OPENSRC"}],
                'test': {
                    'data': 'test'
                }
            }
        }, 300);
    }, 100);
    $scope.vitalsCheck = function (stuff) {
        console.log('Item Added');
    }
}])
    .directive('multiselect', ['$templateCache', '$timeout', function ($templateCache, $timeout) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            selected: '=',
            list: '=',
           ...