example for abstracting some of controller DOM manipulation into directive

diff in _newMobileNav.html.haml template

-  #categoriesMenu{"ng-click" => "goBackToMainMenu($event)", "ng-show" => "sub_menu_show"}
+  #categoriesMenu{"ng-show" => "sub_menu_show", 'gobacktomainmenu' => ""}

diff in unisex controller

    # $scope.goBackToMainMenu = (event) ->
    #   console.log('goBackToMainMenu invoked with, ', event)
    #   return true if $(event.target).is("li.link.strong")
    #   $scope.sub_menu_show = false
    #   $timeout( ->
    #     $scope.sub_menu = false
    #   , 200)
    #   true

    $scope.$on('gobacktomainmenu', (_event, args) ->
      $scope.sub_menu = sub_menu = args['sub_menu']
      $scope.sub_menu_show = sub_menu = args['sub_menu']
    )

gobacktomainmenuDirective.js.coffee

angular.module('HeaderModule').directive('gobacktomainmenu',
  ($rootScope, $timeout) ->
    "ngInject"
    restrict: 'A'
    scope: {}
    link: ($scope, elem, attrs) ->
      onElemClick = (event) ->
        return true if $(event.target).is("li.link.strong")

        $timeout(->
          $rootScope.$broadcast('gobacktomainmenu', {sub_menu: false})
        , 0)

      elem.on('click', onElemClick)
)