title: AngularJS - How to render template AND data from a promise
body: <p>Alright, I'm pretty new to Angular, spent the last two days trying to find a good way to do this and failed. I'm not sure if the title is good either.</p>
  
  <p>I'm trying to make a simple page with a menu. The person would click a menu link and then the view that's below the menu should render accordingly (without refreshing the whole page of course). Sounds easy.</p>
  
  <p>But the thing is, there's going to be a menu for admins and a menu for regular users, so the menu is loaded through ajax. This is an example of what I get:</p>
  
  <pre><code>[
      {
          name: "Manage games",
          templateUrl: "/view/mygames.html",
          url: "/games",
      },
      {
          name: "Weekly Reports",
          templateUrl: "/view/myreports.html",
          url: "/reports"
      },
      {
          name: "Manage Users",
          templateUrl: "/view/users.html",
          url: "/users",
          adminRequired: true
      }
  ];
  </code></pre>
  
  <p>After the menu is loaded, when a menu element is clicked, I want to get data making an ajax call to the <code>url</code> property, and the template to fetch this data to will also be an ajax call to the <code>templateUrl</code> property.</p>
  
  <p>So, how is that achievable? Basically what I want is to have a directive/component/whatever, that by default will be empty, not displayed or rendered. But when I click on a element from the menu, I'm going to $broadcast an event with the dataUrl/templateUrl to the directive/component/whatever, and it will make two ajax calls, one two get the data, and another to get the template, after both get done, it will render and appear on the page.</p>
  
  <p>Any way to this, or suggestion to do something similar to this would be greatly appreciated</p>
  
  <p>By the way, I'm using Angular 1.5.7</p>