Transculed ng-click

Issue in Safari 6

by odiseo

HTML

<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div ng-app="miniapp" ng-controller="Ctrl">
    Click on this icon, it will change on click: <i class="glyphicon" markable active-class="glyphicon-plus" inactive-class="glyphicon-minus" ng-click="doSomething();"></i>
</div>

JavaScript

var $scope;
var app = angular.module('miniapp', []);
app.directive('markable', function() {
	return {
		restrict: 'A',
		scope: {
			activeClass: '@',
			inactiveClass: '@'
		},
		template: "<span ng-click='mark();' ng-transclude></span>",
		replace: true,
		transclude: true,
		link: function(scope, elem, attrs) {
			scope.marked = false;
			elem.addClass(scope.inactiveClass);
			scope.mark = function() {
				if (scope.marked) {
					scope.marked = false;
					elem.removeClass(scope.activeClass);
					elem.addClass(scope.inactiveClass);
				}
				else {
					scope.marked = true;
					elem.removeClass(scope.inactiveClass);
					elem.addClass(scope.activeClass);
				}
			};
		}
	};
});



function Ctrl($scope) {
    $scope.doSomething = function() {
      alert('lulz');  
    };
}