angularjs ng-focus和controller %%指令在一个.js文件中

Question

我正在尝试实现一个小功能，但在这里遇到一个小问题：

1. 查看我的.js文件，是否是在一个脚本文件中同时包含控制器和指令的正确方法？

2. 我应该如何根据我的代码进一步实施，以便在这里制作一个可行的模块，如下面的链接（如果它扩展那么好，css不需要看起来很花哨） ：

   http://plnkr.co/edit/bWUmjHdnXidfGuaRfqo5?p=preview

＆＃13;
＆＃13;
(function() {
    'use strict';

var MasterCtrl = function (user, $state) {
       
       var self =this;

       self.app = {
           state: {
               onFocusSearch: false
           }
       };
       self.enterSearch = function() {
           self.app.state.onFocusSearch = true;
       };

       self.leaveSearch = function() {
           self.app.state.onFocusSearch = false;
       };
   };
    angular.module('master', []);

    angular.module('master').directive('lsMasterHeader', function() {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'modules/master/directive/header.html',
            link: function() {}
        };
    })
    .controller('MasterCtrl', MasterCtrl);
})();
＆＃13;
<form class="form-horizontal">
  <div class="form-input-group">
      <input type="text" class="form-horizontal" placeholder="Enter a Message" ng-class="{'yourAnimateCssRule': master.app.state.onFocusSearch}" ng-focus="master.enterSearch()" ng-focus="master.leaveSearch()" />
      <button type="button" class="btn btn-warning">
          <i class="glyphicon glyphicon-search"></i>
      </button>   
  </div>
</form> 
＆＃13;
＆＃13;
＆＃13;

感谢。