Edit in JSFiddle

angular.module('app', ['ngAnimate']);
  
angular.module('app').
    controller('Ctrl', function ($scope, SomeService) {
        $scope.data = SomeService.data;
        $scope.compute = SomeService.compute;
    });
  
angular.module('app').
    service('SomeService', function () {
        this.data = {
            num1: 2,
            num2: 3
        };
        this.compute = function(){
            var d = this.data;
            return d.num1 * d.num2;
        }
    });

<div ng-app="app" class="app-contents" >
  
  <div ng-controller="Ctrl">
    <div class="panel panel-info">
      <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-if="compute()>100" >
      <div class="panel panel-danger">
        <div class="panel-heading">
          Wao!BIG!
        </div>
        <div class="panel-body">
          {{ compute() }}
        </div>
      </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;
}