AngularJS, Directive improvement I wrote my very first directive and I'd like to get some suggestions for improvement.
My code - plnkr.

webApp.controller('AppCtrl', function ($scope) {

$scope.expandAdd = function() {
    $scope.hiddenAdd = true;

};

$scope.addWeb = function() {
    $scope.hiddenAdd = false;
};


});


webApp.directive('enter',function(){
return {

    link: function (scope, element, attrs){

        scope.hiddenAdd = false;   //hides the site details at first
        //Invoke expender on the controller on mouse click
        element.bind('click', function(){
            console.log('clicked');
            scope.$apply(attrs.enter);
        });
    }
}
});


I have three points I think I can improve here but I'm not sure how:


My directive is not modular enough, the line scope.hiddenAdd = false is bound to hiddenAdd. Is it possible to make it more flexible for future use? 
Though it seems two be picking to different bindings I think that is because they are both start with hidden.
Inside the controller I'm doing DOM manipulation  $scope.hiddenAdd = true; &amp; $scope.hiddenAdd = false; from what I've read it all best be inside directives and I can't find the way to make it a pure directive.
I read somewhere that it is not recommended to use $apply too often, is there a way to avoid using apply in my case?
Option 1: Don't use a directive.
What you are trying to do does not actually require a directive. It is simple enough to play with the scope.

  $scope.expandAdd = function() {
    $scope.hiddenAdd = true;
  };

  $scope.addWeb = function() {
    $scope.hiddenAdd = false;
  };


plnkr