AngularJS - Creating Directives

HTML

<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div ng-app="myapp" ng-init="percent=66">
    <my-progress value="percent"></my-progress>
    <input type="number" ng-model="percent">
    <alert>This is an alert</alert>
        <alert>This is an alert</alert>
        <alert>This is an alert</alert>
</div>

JavaScript

var myapp = angular.module('myapp', []);
myapp.directive('myProgress', function () {
    return {
        restrict: 'E', replace: true,
        scope: {
            progress: '=value'
        },
        template: '<div class="progress progress-striped"><div class="bar" ng-style="{ width: progress + \'%\'}"></div></div>'
    };
});

myapp.directive('alert', function () {
    return {
        restrict: 'E', replace: true, transclude: true,
        template: '<div class="alert" ng-transclude><button type="button" class="close">&times;</button></div>'
    };
});