title: Getting Angular UI Directives for Bootstrap up and running with MVC
body: <p>I am trying to get Angular UI Directives for bootstrap working with ASP MVC.</p>
  
  <p>I have created a new, basic project and have used Nuget to add Twitter Bootstrap, AngularJS and UI Bootstrap.</p>
  
  <p>I am registering these as bundles like so:</p>
  
  <pre><code>bundles.Add(new StyleBundle("~/Content/bootstrap")
      .Include("~/Content/bootstrap.css")
      .Include("~/Content/bootstrap-theme.css"));
  
  bundles.Add(new ScriptBundle("~/bundles/angular")
      .Include("~/Scripts/angular.js"));
  
  bundles.Add(new ScriptBundle("~/bundles/angularUiDirectives")
      .Include("~/Scripts/ui-bootstrap-{version}.js"));
  </code></pre>
  
  <p>My shared _Layout.cshtml page looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Testing Angular - @ViewBag.Title&lt;/title&gt;
      @Styles.Render("~/Content/css")
      @Styles.Render("~/Content/bootstrap")
      @Scripts.Render("~/bundles/modernizr")
  &lt;/head&gt;
  &lt;body&gt;
      @RenderBody()
  
      @Scripts.Render("~/bundles/jquery")
  
      @Scripts.Render("~/bundles/angular")
      @Scripts.Render("~/bundles/angularUiDirectives")
  
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So I have added the libraries for Angular UI directives, along with the dependencies listed <a href="http://angular-ui.github.io/bootstrap/" rel="nofollow">here</a> via Nuget, I am registering all of these libraries as bundles and then I am rendering these bundles on my shared master page.</p>
  
  <p>So far so good, but then I get to the next instruction:</p>
  
  <blockquote>
    <p>As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ui.bootstrap module</p>
  </blockquote>
  
  <p>What does 'declare a dependency' mean in regards to HTML and CSS? The page on github suggests I need to put the following somewhere:</p>
  
  <pre><code>angular.module('myModule', ['ui.bootstrap']);
  </code></pre>
  
  <p>Where do I put this, and when do I run it?</p>
  
  <p>Thanks</p>