title: How do I reload my navbar upon a successful form submission?
body: <p>I am using angular.js. I have a controller for my navbar which looks as follows.</p>
  
  <pre><code>var controllers = angular.module('controllers', []);
  
  controllers.controller('NavbarController', ['$scope', '$http',
      function ($scope, $http) {
          $http.get('/api/courses')
          .success(function(data) {
              $scope.courses = data.objects;
          });
      }
  ]);
  </code></pre>
  
  <p>This will give me all the courses which have been created. I put it on the navbar like so:</p>
  
  <pre><code>&lt;ul class="dropdown-menu"&gt;
    &lt;li  ng-repeat="course in courses"&gt;
      &lt;a href="#/course/course_id/{{ course.id }}"&gt;{{ course.name }}&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This works when I load my page. However, I have a form to create a NEW course, which also works. However, after this has been successfully submitted, the navbar will not contain the class until I completely reload the page. This is my controller which creates a new course.</p>
  
  <pre><code>controllers.controller('CreateCourseController', ['$scope', '$http',
      function($scope, $http) {
          $scope.form_data = {};
          $scope.submitForm = function() {
              $http.post('/api/courses', $scope.form_data).
              success(function(data) {
                // here, I want to add this item into the navbar selection somehow
              });
          }
      }
  ]);
  </code></pre>
  
  <p>what would be the best way in angular to add this newly added class into the navbar, cleanly?</p>