Views/Home/Angular1.cshtml

@{
    ViewBag.Title = "Angular 1";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@*angular scripts*@
<script src="~/Scripts/angular.js" type="text/javascript"></script>
@*<script src="../../Scripts/angular.js" type="text/javascript"></script>
<script src="../../Scripts/angular-ui/ui-bootstrap-tpls.js" type="text/javascript"></script>*@

<script type="text/javascript">
  function Comic($scope) {
    $scope.comicTitle = "Doctor Strange";
    $scope.comicIssue = "169";
  }

  var comicApp = angular.module("comicApp", []);
  comicApp.controller("Comic", Comic);

</script>

<div class="container container-fluid">
  <div ng-app="comicApp">
    <div class="col-sm-12">
      <div class="row">
        <div class="col-sm-2">
        </div>
        <div class="col-sm-8">
          <div class="well">
            <div class="text-center">
              <h2>
                 Simple Angular Instances</h2>
            </div>
            @Html.ActionLink("Angular1", "Angular1_cshtml", new { controller = "Snippets" }) is my first use of Angular. 
          </div>
        
          @* Instance 1*@
          <div id="ComicScreen1" ng-controller="Comic">
            <h3>Instance 1</h3>
            <div>
              Title: <input ng-model="comicTitle" type="text" id="txtTitle1" />
              Issue: <input ng-model="comicIssue" type="text" id="txtIssue1" />
            </div>
            <div id="lblTitleIssue1">{{comicTitle + " " + comicIssue}}</div>
          </div>

          <br /><br />

          @* Instance 2*@
          <div id="ComicScreen2" ng-controller="Comic">
            <h3>Instance 2</h3>
            <div>
              Title: <input ng-model="comicTitle" type="text" id="txtTitle2" />
              Issue: <input ng-model="comicIssue" type="text" id="txtIssue2" />
            </div>
            <div id="lblTitleIssue2">{{comicTitle + " " + comicIssue}}</div>
          </div>

        </div>
      </div>
      <div class="col-sm-2">
      </div>
    </div>
  </div>
</div>