Directive timeout only working once.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-beta.4/angular-1.4.0-beta.5/angular.js"></script>
<div>
    <button ng-click="bool = !bool">Click</button>
    <input ng-show="bool" my-focus="bool"></input>
</div>

JavaScript

var myApp = angular.module("CheckAllModule", []);
    
myApp.directive('myFocus', function ($compile, $timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            var timer = $timeout(function () {
                scope.$watch(attr.myFocus, function (n, o) {
                    if (n != 0 && n) {
                        console.log(element[0]);
                        element[0].focus();
                        element[0].select();
                    }
                });
            }, 3000);
            element.removeAttr("my-focus");
            $compile(element)(scope);
        }
    };
});