ngOptions Inside Directive

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('MyCtrl', function($scope)

        {
            $scope.itemList = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7', 'Option 8', 'Option 9', 'Option 10'];
            $scope.myModel = [];
        });
        app.directive('shuttleBoxes', function()
           {
            return
            {
                restrict: 'E',
                scope:
              {
                    items: '=',
                    ngModel: '='
                },
                template: '<div class="shuttle-boxes">' +
                    '<select multiple="multiple" class="shuttle-boxes-left" ng-options="item for item in items" ng-model="ngModel"></select>' +
                    '</div>',
                replace: true,
            }
        })
    </script>
</head>

<body ng-app="myApp" ng-controller="MyCtrl">
    <shuttle-boxes items="itemList" ng-model="myModel"></shuttle-boxes>
    myModel={{myModel}}
</body>

</html>