A better ng-cloak angularjs directive. Hide elements until ng-hide and ng-show finish

betterCloak.js

angular.module('myApp')
.directive('betterCloak', function() {
	return {
		scope: {
			'ngHide': '=',
			'ngShow': '='
		},
		link: function(scope,element, attrs){
			if (typeof scope.ngHide == 'undefined' && typeof scope.ngShow == 'undefined' || scope.ngHide === false || scope.ngShow === true) {
				$(element).addClass('better-cloak-ready');
			} else {
				var deregisterWatch = scope.$watch(
					function(){
						return element.attr('class').match(/ng-hide/g) && !element.attr('class').match(/ng-hide-/g);
					},
					function(isReady){
						if(isReady){
							$(element).addClass('better-cloak-ready');
							deregisterWatch();
						}
					}
				);
			}
		}
	}
});

index.html

<!-- Styles to add to head tag before other styles -->
<style>
    [better-cloak]:not(.better-cloak-ready){
        display: none !important;
    }
</style>