Question: Let's say I have an couple elements like this:

```
<note ng-show="hasText()">
    {{text}}
</note>

```

And I have a directive like this:

```
directive('note', function() {
    return {
        restrict: 'E',
        controller: 'NoteCtrl'
    }
})

```

And a controller like this:

```
function NoteCtrl($scope, $element) {
    $scope.text = "Hello, world!";
    $scope.hasText = function() {
        return $scope.text.length > 0;
    }
}

```

What this will do is show the note if it has text, and hide it otherwise.

What I want to know is, is there a way to remove `ng-show` from the HTML, and add it dynamically from within the controller?

For example, you could attempt to do it by making this the first line in `NoteCtrl`, but it does not work:

```
$($element).attr('ng-show', 'hasText()');

```

Answer: 
To get even closer to the angular behaviour I suggest to use the ng-hide css class.  

Starting from Marks example:

```
myApp.directive('note', function() {
    return {
        restrict: 'E',
        controller: function($scope) {
            $scope.text = "Hello, world!";
            $scope.clearText = function() {
                $scope.text = '';
            }
        },
        link: function($scope, $element) {
            $scope.$watch('text.length', function(len){
                if (len <= 0) {
                    $element.addClass("ng-hide");
                } else {
                    $element.removeClass("ng-hide");
                }
            });
        }
    }
})

```

This way if a custom hiding class is defined it will apply to this as well.  

(see <https://docs.angularjs.org/api/ng/directive/ngHide>)
Combining @Valentyn's and @Josh's input, here's a directive that only does data manipulation in the controller, and uses a link function for the CSS manipulation:

```
myApp.directive('note', function() {
    return {
        restrict: 'E',
        controller: function($scope) {
            $scope.text = "Hello, world!";
            $scope.clearText = function() {
                $scope.text = '';
            }
        },
        link: function($scope, $element) {
            $scope.$watch('text.length', function(len){
                $element.css('display', len > 0 ? '' : 'none');
            });
        }
    }
})

```

HTML:

```
<note>
    {{text}}
    <br><a ng-click="clearText()">clear text</a>
</note>

```

[Fiddle](http://jsfiddle.net/mrajcok/jGqwa/).