title: ui-router Main View is rendering thrice and no controller are registering
body: <p>I am trying to create a SPA using angular ui-router with MVC. I am facing three issues.
  1.The controllers OfferController.js and OfferCustomizationController.js are not registering.
  2.I am getting the errors ' No reference point given for path '.offer', No reference point given for path '.customizations'.
  3. Main view is rendering thrice. </p>
  
  <p>I have no clue what am i missing. Please help.</p>
  
  <p>I have included the following files in my Layout.cshtml:</p>
  
  <pre><code>&lt;script src="@Links.Scripts.angular_min_js"&gt;&lt;/script&gt;
  &lt;script src="@Links.Scripts.ProductCatalog.app_js"&gt;&lt;/script&gt;
  &lt;script src="@Links.Scripts.ProductCatalog.service_js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have made two views. Offers And OfferCustomizations. And a main view. Following is my code for the main view:</p>
  
  <pre><code>&lt;div class="inside-data-div" ng-app="ProductCatalog"&gt;
      @*&lt;div ui-view&gt;&lt;/div&gt;*@
      &lt;div class="col-lg-12"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-8 col-sm-offset-2"&gt;
  
                  &lt;div id="form-container"&gt;
  
                      &lt;div class="page-header text-center"&gt;
                          &lt;h2&gt;Create Offer&lt;/h2&gt;
  
                          &lt;!-- the links to our nested states using relative paths --&gt;
                          &lt;!-- add the active class if the state matches our ui-sref --&gt;
                          &lt;div id="status-buttons" class="text-center"&gt;
                              &lt;a ui-sref-active="active" ui-sref=".offer"&gt;&lt;span&gt;1&lt;/span&gt; Offer Details&lt;/a&gt;
                              &lt;a ui-sref-active="active" ui-sref=".customizations"&gt;&lt;span&gt;2&lt;/span&gt; Offer Customizations&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;!-- use ng-submit to catch the form submission and use our Angular function --&gt;
                      &lt;form id="signup-form" ng-submit="SaveForm()"&gt;
  
                          &lt;!-- our nested state views will be injected here --&gt;
                          &lt;div id="form-views" ui-view&gt;&lt;/div&gt;
                      &lt;/form&gt;
  
                  &lt;/div&gt;
  
                  &lt;!-- show our formData as it is being typed --&gt;
                  &lt;pre&gt;
          {{ formData }}
      &lt;/pre&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Following is my code of app js: </p>
  
  <pre><code>var productCatalogApp = angular.module('ProductCatalog', ['ui.router']);
  productCatalogApp.value('appName', 'Product Catalog');
  
  productCatalogApp.config(function ($stateProvider, $urlRouterProvider) {
  
      $stateProvider
  
          // route to show our basic form (/form)
          .state('wizard', {
              url: '/wizard',
              templateUrl: 'WizardSubForm',
              controller: 'WizardMainController'
          })
  
          // nested states 
          // each of these sections will have their own view
          // url will be nested (/form/profile)
          .state('wizard.offer', {
              url: '/offer',
              templateUrl: 'OfferForm',
              controller: 'OfferCtrlr'
          })
  
          // url will be /form/interests
          .state('wizard.customizations', {
              url: '/customizations',
              templateUrl: 'OfferCustomizations',
              controller: 'CustomizationCtrlr'
          });
  
  
      // catch all route
      // send users to the form page 
      $urlRouterProvider.otherwise('/wizard/offer');
  });
  
  productCatalogApp.controller('WizardMainController', function ($scope) {
  
      // we will store all of our form data in this object
      $scope.formData = {};
  
      // function to process the form
      $scope.SaveForm = function () {
          alert('awesome!');
          $scope.formData = { "Offer": $scope.offer, QuestionGroups: $scope.QuestionGroups }
      };
  
  });
  </code></pre>
  
  <p>This is how i'm registering my controllers. Below is the one for offercontroller. </p>
  
  <pre><code>var app = angular.module('ProductCatalog.controllers', []);
  app.controller('OfferCtrlr', function ($scope, $http, $modal) {
   });
  </code></pre>
  
  <p>Any help will be appreciated. </p>