thinkadoo/jsbin.EJizEQiB.html

## jsbin.EJizEQiB.html
<!DOCTYPE html>
<html ng-app="rootApp">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.7/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.9.0/ui-bootstrap-tpls.min.js"></script>
<meta charset=utf-8 />
<title>Bootstrap</title>
</head>
<body>

<div class="jumbotron">
  <h1>Hello, World!</h1>
  <p>A place to try out Bootstrap and AngularJS.<p>
  <p>Clone it and GO!.<p>
</div>
     <hr/>

<div ng-controller="UserCtrl">
  <table>
    <tr ng-repeat="user in users">
      <td>{{user.name}} {{user.surname}}</td>
      <td>{{user.state}}</td>
      <td><div my-directive
        my-user="user"
        my-class="{{user.state === 1 ? 'btn-success' : 'btn-danger'}}"
        my-title="{{user.state === 1 ? 'Unlock User' : 'Lock User'}}"
        my-glyph="{{user.state === 1 ? 'remove-sign' : 'ok-sign'}}">
  </div></td>
    </tr>
  </table>


</div>

  <hr/>

</body>
</html>

## jsbin.EJizEQiB.js
// top level application
angular.module('rootApp',['bootStrapApp']);

// module with its own local scope
angular.module( 'bootStrapApp', ['ui.bootstrap'] )

// alert controller with its own scope
.controller( 'UserCtrl', function($scope) {
  $scope.users = [
    { name: 'Franszo', surname: 'Faul', state:0 },
    { name: 'Elrich', surname: 'Faul', state:1 },
    { name: 'Mauritz', surname: 'Kruger', state:0 },
    { name: 'Andre', surname: 'Venter', state:1 }
  ];
})

// my directive
.directive('myDirective', function() {
     return {
     restrict: 'EAC',
     replace: true,
     scope: {
       myUser: '=myUser',
       myClass: '@myClass',
       myTitle: '@myTitle',
       myGlyph: '@myGlyph'
     },
       link: function ($scope) {
         $scope.lockUser=function (user) {
           user.state = user.state ? 0 : 1;
         };
       },
     template: '<button ng-click="lockUser(myUser)" class="btn {{myClass}}" title="{{myTitle}}"><i class="glyphicon glyphicon-{{myGlyph}}"></i></button>'
    };
})

;
	<!DOCTYPE html>
	<html ng-app="rootApp">
	<head>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.7/angular.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.9.0/ui-bootstrap-tpls.min.js"></script>
	<meta charset=utf-8 />
	<title>Bootstrap</title>
	</head>
	<body>

	<div class="jumbotron">
	<h1>Hello, World!</h1>
	<p>A place to try out Bootstrap and AngularJS.<p>
	<p>Clone it and GO!.<p>
	</div>
	<hr/>

	<div ng-controller="UserCtrl">
	<table>
	<tr ng-repeat="user in users">
	<td>{{user.name}} {{user.surname}}</td>
	<td>{{user.state}}</td>
	<td><div my-directive
	my-user="user"
	my-class="{{user.state === 1 ? 'btn-success' : 'btn-danger'}}"
	my-title="{{user.state === 1 ? 'Unlock User' : 'Lock User'}}"
	my-glyph="{{user.state === 1 ? 'remove-sign' : 'ok-sign'}}">
	</div></td>
	</tr>
	</table>


	</div>

	<hr/>

	</body>
	</html>
	// top level application
	angular.module('rootApp',['bootStrapApp']);

	// module with its own local scope
	angular.module( 'bootStrapApp', ['ui.bootstrap'] )

	// alert controller with its own scope
	.controller( 'UserCtrl', function($scope) {
	$scope.users = [
	{ name: 'Franszo', surname: 'Faul', state:0 },
	{ name: 'Elrich', surname: 'Faul', state:1 },
	{ name: 'Mauritz', surname: 'Kruger', state:0 },
	{ name: 'Andre', surname: 'Venter', state:1 }
	];
	})

	// my directive
	.directive('myDirective', function() {
	return {
	restrict: 'EAC',
	replace: true,
	scope: {
	myUser: '=myUser',
	myClass: '@myClass',
	myTitle: '@myTitle',
	myGlyph: '@myGlyph'
	},
	link: function ($scope) {
	$scope.lockUser=function (user) {
	user.state = user.state ? 0 : 1;
	};
	},
	template: '<button ng-click="lockUser(myUser)" class="btn {{myClass}}" title="{{myTitle}}"><i class="glyphicon glyphicon-{{myGlyph}}"></i></button>'
	};
	})

	;