Angular js directive in module not working correctly - angularjs

Question

I have one module call "menuLeft", when module he initiate ,not loading correctly my directive, but if run my function en el method "run" correctly.
I dont know why is this.
This is my code
(function () {
angular.module('menuLeft', []);
angular.module('menuLeft')
.run(htmlMenuDirectivaGrupo)
.directive('ctrlMenuDirectivaGrupo', ctrlMenuDirectivaGrupo);
//MY MENU DIRECTIVE (THIS NOT LOAD)
//MENU GRUPO
/**
* #ngInject
*/
function ctrlMenuDirectivaGrupo($timeout) {
alert('hello ctrlmenu');
return {
scope: {
section: '='
},
templateUrl: 'partials/menuToogle.tmpl.html',
link: function ($scope, $element) {
var controller = $element.parent().controller();
$scope.isOpen = function () {
return controller.isOpen($scope.section);
};
$scope.toggle = function () {
controller.toggleOpen($scope.section);
};
}
};
}
//MY TEMPLATE FOR DIRECTIVE (THIS IF LOAD)
/**
* #ngInject
*/
function htmlMenuDirectivaGrupo($templateCache) {
alert('hello htmlmenu');
$templateCache.put('partials/menuToogle.tmpl.html',
'<md-button class="md-button-toggle"\n' +
' ng-click="toggle()"\n' +
' aria-controls="docs-menu-{{section.name | nospace}}"\n' +
' flex layout="row"\n' +
' aria-expanded="{{isOpen()}}">\n' +
' {{section.name}}\n' +
' <span aria-hidden="true" class=" pull-right fa fa-chevron-down md-toggle-icon"\n' +
' ng-class="{\'toggled\' : isOpen()}"></span>\n' +
'</md-button>\n' +
'<ul ng-show="isOpen()" id="docs-menu-{{section.name | nospace}}" class="menu-toggle-list">\n' +
' <li ng-repeat="page in section.pages">\n' +
' <menu-link section="page"></menu-link>\n' +
' </li>\n' +
'</ul>\n' +
'');
}
})();
Why not load two functions?, there are bad code or declarations?
thanks.

Answer 1

Use something like this . .
return {
restrict: 'E',
scope: {
section: '='
},
controller: ['$scope', function ($scope){..}],
link: function (scope, element, attrs) {..},
template: '<div class="bootsrtap">'+
'<input type="text" ng-model="searchParam" placeholder="{{ attrs.placeholder }}"'+
'class="{{ attrs.inputclass }}"'+
'id="{{ attrs.inputid }}"'+
'ng-required="{{ autocompleteRequired }}" />'+
'</div> '
};

Answer 2

the problem is , what my directive nor declaring correctly in .html
This is the way we should call it to function properly.
DIRECTIVES
(function () {
angular.module('menuLeft', []);
angular.module('menuLeft')
.run(htmlMenuDirectivaGrupo)
.directive('menuGrupo', ctrlMenuDirectivaGrupo);
//MY MENU DIRECTIVE (THIS NOT LOAD)
//MENU GRUPO
/**
* #ngInject
*/
function ctrlMenuDirectivaGrupo($timeout) {
alert('hello ctrlmenu');
return {
scope: {
section: '='
},
templateUrl: 'partials/menuToogle.tmpl.html',
link: function ($scope, $element) {
var controller = $element.parent().controller();
$scope.isOpen = function () {
return controller.isOpen($scope.section);
};
$scope.toggle = function () {
controller.toggleOpen($scope.section);
};
}
};
}
//MY TEMPLATE FOR DIRECTIVE (THIS IF LOAD)
/**
* #ngInject
*/
function htmlMenuDirectivaGrupo($templateCache) {
alert('hello htmlmenu');
$templateCache.put('partials/menuToogle.tmpl.html',
'<md-button class="md-button-toggle"\n' +
' ng-click="toggle()"\n' +
' aria-controls="docs-menu-{{section.name | nospace}}"\n' +
' flex layout="row"\n' +
' aria-expanded="{{isOpen()}}">\n' +
' {{section.name}}\n' +
' <span aria-hidden="true" class=" pull-right fa fa-chevron-down md-toggle-icon"\n' +
' ng-class="{\'toggled\' : isOpen()}"></span>\n' +
'</md-button>\n' +
'<ul ng-show="isOpen()" id="docs-menu-{{section.name | nospace}}" class="menu-toggle-list">\n' +
' <li ng-repeat="page in section.pages">\n' +
' <menu-link section="page"></menu-link>\n' +
' </li>\n' +
'</ul>\n' +
'');
}
})();
HTML
<menu-grupo></menu-grupo>
I recommend reading https://github.com/johnpapa/angular-styleguide
Thanks for all.