Angular Transclude Directive (Select Field)

by nwinkler

HTML

<link rel="stylesheet" href="http://angularjs.org/css/bootstrap.min.css">
<div class="border" ng-controller="editCtrl">
    <input type="text" ng-model="label"/> {{label}}
    
    <div>
        <div foo-select my-label="{{label}}: ">
            <option value="INDIA">INDIA</option>
            <option value="SOUTH AFRICA">SOUTH AFRICA</option>
            <option value="GERMANY">GERMANY</option>
            <option value="USA">USA</option>
        </div>
    </div>
</div>

CSS

.border {
    border: 1px solid gray;
    margin: 8px;
    padding: 8px;
}

JavaScript

function editCtrl($scope) {
    $scope.label = "Countries";
}

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

mod.directive('fooSelect', function () {
    return {
        restrict: 'A',
        transclude: true,
        template:
        '<span id="label">{{myNewLabel}} </span><select ng-transclude><</select>',
        link: function(scope, element, attrs) {
            attrs.$observe('myLabel', function (newValue) {
                scope.myNewLabel = newValue;
            });
        }
    };
})