Angular JS - Exposing Controller Function outside the module via onClick function call

Exposing Controller Function outside the module via onClick function call For re-using already defined onClick functions

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <div ng-app="myapp">
    <p>
     Update input to see transitions when valid/invalid.
     Integer is a valid value.
    </p>
    <form name="testForm" ng-controller="ExampleController">
      <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
             aria-describedby="inputDescription" />
    </form>
    </div>

CSS

.my-input {
        transition:all linear 0.5s;
        background: transparent;
      }
      .my-input.ng-invalid {
        color:white;
        background: red;
      }

JavaScript

angular.module('myapp', [])
       .controller('ExampleController', ['$scope', function($scope) {
         $scope.val = '1';
       }]);