AngularJS Example:
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-sanitize.js"></script>
<div ng-app="choicesApp">
<div ng-controller="ChoicesCtrl">
<ng-form name="choicesForm">
<div ng-bind-html="trustCustom()"></div>
<div>Static Input:
<input required type='text' name="static-input" ng-model='static'>
</div>
<div>A required input without ngModel:
<input required name="without-ng-model-input">
</div>
<div>A div which is required and has ngModel
<div id="fancy-div" ng-model="myDiv" name="a-div" required>{{ myDiv }}</div>
</div>
<button ng-repeat="button in buttons" ng-disabled="choicesForm.$invalid">
{{button.text}}
</button>
</ng-form>
<div>This button assigns a value to the div's ngModel:
<button ng-click="myDiv = 'hello!'">Click me!</button>
</div>
<div>This button clears the value assigned to the div's ngModel:
<button ng-click="myDiv = ''">Click me!</button>
</div>
</div>
</div>
CSS
#fancy-div {
background: orange;
display: inline-block;
height: 16px;
padding: 0 16px;
vertical-align: middle;
}
JavaScript
(function() {
angular
.module('choicesApp', ['ngSanitize'])
.controller('ChoicesCtrl', ['$compile', '$document', '$scope', '$sce', '$timeout', function($compile, $document, $scope, $sce, $timeout) {
$scope.custom = "<div id='compile-me'>{{ iAmNotYetCompiled }} <input required type='text' name='dynamic-input' ng-model='dynamic'></div>";
$scope.trustCustom = function() {
return $sce.trustAsHtml($scope.custom);
};
$scope.buttons = [{
text: 'Submit 1'
}, {
text: 'Submit 2'
}];
$timeout(function() {
$scope.iAmNotYetCompiled = 'Dynamic Input:'
$compile($document[0].getElementById('compile-me'))($scope);
}, 750);
}]);
})();