AngularJS: DOM manipulation the angular way.

At first, when trying to manipulate a DOM with jQuery, you are tempted to do it in the controller. That is highly discouraged to enforce the concept of declarative approach.

Here is a very simple concept of DOM manipulation in AngularJS.
For example, say we have a box, and on click we want to fade it out.
The html would look like this (including 3 ways to pass in value):

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
     <div 
       class="box" 
       data-ng-click="boxClick(100)" 
       data-mm-box="200"
       data-fade-duration="300">
     </div>
  </div>
</div>

simple css:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

And the javascript:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.boxClick = function(value) {
      this.doBoxClick(value);
  };
}

myApp.directive("mmBox", function() {
  return {
    link: function(scope, elem, attrs) {
      var duration = parseInt(attrs.mmBox);
       scope.doBoxClick = function(value) {
         console.log("1. " + value);
         console.log("2. " + attrs.mmBox);
         console.log("3. " + attrs.fadeDuration); 
         elem.fadeOut(duration);
      }
    } 
  }
});

Notice I put in two other ways to pass in values so the directive is not hard coded to any value and can be reused.