Edit in JSFiddle

<div class="container-fluid">
    <div class="row-fluid">
        <div ng-app="example" ng-controller="myCtrl">
            <h3>Bound fields demo</h3>
            <hr />
            <div class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Download</label>
                    <div class="controls">
                        <bound-field model="data.download">
                            <label class='checkbox'>
                                <input type="checkbox" ng-model="data.download" ng-true-value="True" ng-false-value="False" />Download NuGet packages</label>
                        </bound-field>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Upload</label>
                    <div class="controls">
                        <bound-field model="data.upload">
                            <label class='checkbox'>
                                <input type="checkbox" ng-model="data.upload" ng-true-value="True" ng-false-value="False" />Upload NuGet packages</label>
                        </bound-field>
                    </div>
                </div>
                <div class="form-actions"> <a class="btn btn-success">Save</a>
 <a class="btn">Cancel</a>

                </div>
            </div>
        </div>
    </div>

var module = angular.module("example", []);

function myCtrl($scope) {
    $scope.data = {
        download: "True",
        upload: "#{MyVariable.PerformUpload}",
    };
};

module.directive("boundField", function ($compile, $timeout) {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: "<div class='bound-field control'><a href='' ng-class='{bound: isBound}' title='{{ boundText() }}' class='toggle-bound-field'></a><div class='transcluded' ng-hide='isBound' ng-transclude></div> <div ng-show='isBound' class='transcluded'><input type='text' class='input-xlarge' ng-model='model' /> <button class='btn' ng-click='openIntellisense()'><i class='icon-list-alt'></i></button></div> </div>",
        scope: {
            model: '='
        },
        link: function (scope, element, attrs) {
            scope.isBound = false;
            scope.boundText = function () {
                if (scope.isBound) return "This field is bound";
                return "This field supports custom bindings";
            };
            scope.openIntellisense = function () {
                alert("A dropdown of variables would appear here");
            };
            scope.$watch("model", function () {
                if (scope.model) {
                    if (scope.model.indexOf("#{") >= 0) {
                        scope.isBound = true;
                    }
                }
            });
            $('a.toggle-bound-field', element).click(function (e) {
                scope.$apply(function () {
                    scope.isBound = !scope.isBound;
                });
            });
        }
    };
});

body {
    width: 700px;
}
h3 {
    font-weight: normal;
}
.bound-field {
}
.bound-field a.toggle-bound-field {
    float: right;
    margin-top: 7px;
    width: 5px;
    height: 5px;
    background: white;
    border: 1px solid #ccc;
    content:'';
    display: block;
    padding: 3px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 4px;
}
.bound-field a.toggle-bound-field:hover, .bound-field a.toggle-bound-field.bound:hover {
    box-shadow: 0 0 3px #ffcc00;
}
.bound-field .transcluded {
    margin-right: 50px;
}
.bound-field a.toggle-bound-field.bound {
    background-color: #49afcd;
    background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
    background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
    background-repeat: repeat-x;
    border-color: #2f96b4 #2f96b4 #1f6377;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}