title: Angular function not working?
body: <p>I'm new to Angular but I've done a couple basic examples successfully. Now I'm looking at starting my first real world Angular/MVC/WebAPI app. It's going to be a Time Card type app and the first thing I'm looking to do is display the current time of the local user. I did to a basic HelloWorld with Angular on the Index.cshtml page just to make sure my references to Angular were correct. That worked....BTW, I'm using Angular v1.5.</p>
  
  <p>I found the following post and I'm trying to use a mixture of the code. </p>
  
  <pre><code>http://www.codeproject.com/Articles/806029/Getting-started-with-AngularJS-and-ASP-NET-MVC-Par
  
  http://stackoverflow.com/questions/23383233/how-to-make-a-ticking-clock-time-in-angularjs-and-html
  </code></pre>
  
  <p>However I'm not getting it to work and it's probably something simple I'm missing, yet I don't see it. </p>
  
  <p>Here is my _Layout.csthml. I have the ng-app and ng-controller listed in the 
  <code>&lt;html&gt;</code> tag</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="VirtualTimeClockApp" ng-controller="LandingPageController"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
      @Styles.Render("~/Content/css")
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("Contact", "Contact", "Home")&lt;/li&gt;
                  &lt;/ul&gt;
                  @Html.Partial("_LoginPartial")
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container body-content"&gt;
          @RenderBody()
          &lt;hr /&gt;
          &lt;footer&gt;
              &lt;p&gt;&amp;copy; @DateTime.Now.Year - My ASP.NET Application&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  
      @Scripts.Render("~/bundles/bootstrap")
      @Scripts.Render("~/bundles/angular")
      @Scripts.Render("~/bundles/VirtualTimeClockApp")
      @RenderSection("scripts", required: false)
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my Home/Index.cshtml</p>
  
  <pre><code>@model VirtualTimeClock.ViewModels.HomeViewModel
  
  @{
      ViewBag.Title = "Home Page";
  }
  
  &lt;div class="jumbotron"&gt;
      &lt;h1&gt;@Model.currentServerTime&lt;/h1&gt;
  
      &lt;div ng-controller='TimeCtrl'&gt;
          &lt;p&gt;{{ clock | date:'HH:mm:ss'}}&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;p class="lead"&gt;ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.&lt;/p&gt;
      &lt;p&gt;&lt;a href="http://asp.net" class="btn btn-primary btn-lg"&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my BundleConfig.cs file. Next to the last Bundles.Add is where I bundle the controller directory and the main .js file.</p>
  
  <pre><code>namespace VirtualTimeClock
  {
      public class BundleConfig
      {
          // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
          public static void RegisterBundles(BundleCollection bundles)
          {
              bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                        "~/Scripts/bootstrap.js"));
  
              bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                        "~/Scripts/angular.js"));
  
              bundles.Add(new ScriptBundle("~/bundles/VirtualTimeClockApp")
                      .IncludeDirectory("~/Scripts/Controllers", "*.js")
                      .Include("~/Scripts/VirtualTimeClock.js"));
  
              bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/bootstrap.css",
                        "~/Content/site.css"));
          }
      }
  }
  </code></pre>
  
  <p>This is my VirtualTimeClock.js file. The thing I'm not 100% on here is the declaration of VirtrualTimeClockApp is then adding a module to the "VirtualTimeClockApp" that is referenced in the ?</p>
  
  <pre><code>var VirtualTimeClockApp = angular.module('VirtualTimeClockApp', []);
  
  VirtualTimeClockApp.controller('LandingPageController', LandingPageController);
  </code></pre>
  
  <p>This is my LandingPageController.js file.</p>
  
  <pre><code>var module = angular.module('VirtualTimeClockApp', []);
  
  module.controller('TimeCtrl', function ($scope, $interval) {
      var tick = function () {
          $scope.clock = Date.now();
      }
      tick();
      $interval(tick, 1000);
  });
  </code></pre>