title: Adding directives to an element using another directive
body: <p>I am trying to create a directive that adds some html code but also adds additional attributes/directives.</p>
  
  <p>Using the code below, an <code>ng-class</code> attribute is indeed added, but it seems angular does not recognize it as a directive anymore. It is there, but it has no effect.</p>
  
  <p>How can I get it to work? Thanks.</p>
  
  <hr>
  
  <p>The Angular code:</p>
  
  <pre><code>angular.module('myModule', [])
      .directive('menuItem', function () {
          return {
              restrict: 'A',
              template: '&lt;div ng-if="!menuItem.isSimple" some-other-stuff&gt;{{menuItem.name}}&lt;/div&gt;'
                       +'&lt;a ng-if="menuItem.isSimple" ng-href="{{menuItem.link}}"&gt;{{menuItem.name}}&lt;/a&gt;',
              scope: {
                  menuItem: '='
              },
              compile: function (element, attrs) {
                  element.attr('ng-class', '{active : menuItem.isActivated()}');
              }
          }
      });
  </code></pre>
  
  <p>And the html:</p>
  
  <pre><code>&lt;li menu-item="menuItem" ng-repeat="menuItem in getMenuItems()" /&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>EDIT:</strong>
  The solution by @Abdul23 solves the problem, but another problem arises: when the template contains other directives (like <code>ng-if</code>) these are not executed. It seems the problem just moved.</p>
  
  <p>Is it possible to also make the directives inside the template work?<br>
  Or perhaps insert the html using the compile function instead of the template parameter. Since I want a simple distinction based on some value <code>menuItem.isSimple</code> (and this value will not change), perhaps I can insert only the html specific to that case without using ng-if, but how?</p>