Angular: Empty Fiddle

http://angularjs.org/

by marcolepsy

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/animatecss/3.1.0/animate.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"></script>

<div ng-controller="MyCtrl">
    <div ng-repeat="student in class" class="well">
        <center>{{student.name}}</center>
        <my-directive id="grade"><center ng-class="student.cls"> {{student.grade}}<center></my-directive>
    </div>
</div>
<div ng-controller="MyOtherCtrl">
    <div ng-repeat="curve in curves" class="well">{{curve.shortName}}
        <br>{{curve.desc}}
        <br>
        <button class="btn btn-success" ng-click="click($index, 'plus')">+1</button>
        <button class="btn btn-danger" ng-click="click($index, 'minus')">-1</button>
    </div>
</div>

CSS

#grade{
    
}

JavaScript

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

myApp.directive('myDirective', function($timeout, $animate) {
    return{
        restrict: 'E',
        link: function(scope, element, attrs){
            $timeout(function(){$animate.removeClass(element, 'animated bounce');},1000);
            scope.$watch(function() {
              return element.find('center').attr('class');
            }, function(newValue, oldValue) {
              if (newValue !== oldValue) { 
                console.log('class of <center> is: ' + newValue);
              }
            });
        }
    }
});
//myApp.factory('myService', function() {});

function MyCtrl($scope, $rootScope, $timeout) {
    $scope.class = [{
        name: 'John',
        grade: '90',
        cls: ''
    }, {
        name: 'Sally',
        grade: '95',
        cls: ''
    }];

    $scope.$on('buttonClicked', function () {
        for (var i=0; i<$scope.class.length; i++)
        {
            var newGrade = 0;
            //var element = $("#grade");
            if ($rootScope.curve == 'plus') {
            newGrade = angular.fromJson($scope.class[i].grade) + 1;
                $scope.class[i].cls = "animated bounce";
                //$scope.class[i].cls = "";
                //$timeout(function(){$scope.class[i].cls='';}, 2000);
                //$animate.setClass(this.element, 'animated bounce', '');
            } else if ($rootScope.curve == 'minus') {
            newGrade = angular.fromJson($scope.class[i].grade) - 1;
                $scope.class[i].cls = "animated wobble";
            }
            $scope.class[i].grade = newGrade;
            
        //alert('student controller says hi');
        }    
    });
    
    
}

function MyOtherCtrl($scope, $rootScope) {
    $scope.curves = [{
        shortName: 'Class Exam Curve 1',
        desc: 'description of curve'
    }];

    $scope.click = function (index, curve) {
        $rootScope.curve = curve;
        //alert(curve);
       ...