title: AngularJS Navigation does not work after tinymce directive
body: <p>I have problem I can't figure out but I do have a hint. Before integrating TinyMCE the main navigation was working fine eg links Settings, Analytics, Setup; it isn't working now if you click them.</p>
  <p>Here is my js file:</p>
  <pre><code>var app_htmleditor_module = angular.module('app_htmleditor', ['components']).
      config(['$routeProvider', function($routeProvider) {
          $routeProvider.
              when('/', {templateUrl: getBaseURL()+'public/tpl/app/htmleditor.htm',   controller: HtmlEditorCtrl, reloadOnSearch:false }).
              otherwise( {redirectTo: '/'});
      }
  ]);
      
  angular.module('components', []).directive('imageUpload', function () {
      return {
          restrict: 'E',
          scope: {
                uploaderid:'@uploaderid'
              },
          templateUrl: '/public/tpl/imageupload.htm'
      }
  });
          
  app_htmleditor_module.directive('uiTinymce', function() {
       return {
           
           require: 'ngModel',
           link: function(scope, element, attrs, ngModel) {
               
               element.tinymce({
                   // Location of TinyMCE script
                   script_url: 'http://resources.holycrap.ws/jscripts/tiny_mce/tiny_mce.js',
  
                   // General options
                   theme: &quot;simple&quot;,
  
                   // Change from local directive scope -&gt; &quot;parent&quot; scope
                   // Update Textarea and Trigger change event
                   // you can also use handle_event_callback which fires more often
                   onchange_callback: function(e) {
  
                       if (this.isDirty()) {
                           this.save();
  
                           // tinymce inserts the value back to the textarea element, so we get the val from element (work's only for textareas)
                           //ngModel.$setViewValue(e.getBody().innerHTML);
                           ngModel.$setViewValue(element.val());
                           scope.$apply();
                           
                           return true;
                       }
                   }
               });
  
           }
       }
  });
  </code></pre>
  <p>And I added above tinymce directive into textarea using <code>ui:tinymce</code> like this:</p>
  <pre><code>&lt;textarea ui:tinymce ng-model=&quot;data.html_tab&quot; id=&quot;{{fileUploaderID}}_html_tab&quot; name=&quot;{{fileUploaderID}}_html_tab&quot; style=&quot;width:600px; height:300px&quot;&gt;&lt;/textarea&gt;
  </code></pre>
  <p>Notice <code>ui:tinymce</code> above. If I remove that, the navigation works fine again. So how do I make my navigation work with <code>ui:tinymce</code> added in textarea?</p>
  <p><strong>DEMO URL:</strong></p>
  <p><a href="http://dev-socialapps.rkm-group.com/app/htmleditor/index#/" rel="nofollow noreferrer">http://dev-socialapps.rkm-group.com/app/htmleditor/index#/</a></p>
  <p>Any help will be greatly appreciated. Thanks</p>
  <h2>Update:</h2>
  <p>As suggested, I added ui js file to my template file first:</p>
  <pre><code>&lt;script src=&quot;https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>Then In my js file, I added:</p>
  <pre><code>var app_htmleditor_module = angular.module('app_htmleditor', ['components', 'ui']).
      config(['$routeProvider', function($routeProvider) {
          $routeProvider.
              when('/', {
                  templateUrl: getBaseURL()+'public/tpl/app/htmleditor.htm',
                  controller: HtmlEditorCtrl,
                  reloadOnSearch:false
              }).
              otherwise( {redirectTo: '/'});
      }
  ]);
  
  app_htmleditor_module.value('ui.config', {
     tinymce: {
        theme: 'simple'
     }
  });
  </code></pre>
  <p>And in textarea tag:</p>
  <pre><code>&lt;textarea ui-tinymce ng-model=&quot;tinymce&quot; id=&quot;{{fileUploaderID}}_html_tab&quot; name=&quot;{{fileUploaderID}}_html_tab&quot; style=&quot;width:600px; height:300px&quot;&gt;&lt;/textarea&gt;
  </code></pre>
  <p>But I am getting error:</p>
  <pre><code>ReferenceError: tinymce is not defined
  </code></pre>
  <p>Though ui js file is added fine, I confirmed by viewing source code and clicking on link</p>