Edit in JSFiddle

angular.module('app', ['ngAnimate']);
  
angular.module('app').
    controller('Ctrl', function ($scope, SomeService) {
        $scope.data = SomeService.data;
        $scope.compute = SomeService.compute;
        $scope.panelClass = function(){
            var isDanger = SomeService.isDanger();
            return {
                'panel-info':!isDanger,
                'panel-danger':isDanger
            };
        };
    });
  
angular.module('app').
    service('SomeService', function () {
        this.data = {
            num1: 2,
            num2: 3
        };
        this.compute = function(){
            var d = this.data;
            return d.num1 * d.num2;
        };
        this.isDanger = function(){
            return (this.compute()>100);
        };
    });

<div ng-app="app" class="app-contents" >
  
  <div ng-controller="Ctrl">
    <div class="panel" 
         ng-class="panelClass()" >
      <div class="panel-heading">
          controllerAS
      </div>
      <div class="panel-body">
        <input ng-model="data.num1" />
        X
        <input ng-model="data.num2" />
        =
        {{ compute() }}
      </div>
    </div>
        
  </div><!-- ng-controller="Ctrl" -->
    
    
</div>




<!-- AngularJS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular-animate.js"></script>

.app-contents {
    margin: 8px;
    padding: 8px;
}

input[text] {
    width: 3rem;
}

//a working example can be found at the bottom of this page
.wao-panel.ng-hide-add, .wao-panel.ng-hide-remove {
  /* this is required as of 1.3x to properly
     apply all styling in a show/hide animation */
  transition:0s linear all;
}

.wao-panel.ng-hide-add-active,
.wao-panel.ng-hide-remove-active {
  /* the transition is defined in the active class */
  transition:1s linear all;
}

.wao-panel.ng-hide-add ,
.wao-panel.ng-hide-remove.ng-hide-remove-active 
{ 
    opacity: 1;
}

.wao-panel.ng-hide-remove ,
.wao-panel.ng-hide-add.ng-hide-add-active 
{ 
    opacity: 0;
}