范围不更新模型中的更改

我有一个可扩展的形式，它生成一个具有两个属性的对象，一个title和description。此对象作为 json 对象成功提交到我的数据库。我目前正在使用一个与Tastypie交互的Angular（1.3.2）前端作为与我的Django（1.7）后端的接口层。问题是在向数据库添加新对象后，我从未观察到主页的更新。我需要刷新页面才能显示不理想的对象。

首页.html

<div class="protocol-list-container">
<div ng-app="protocolApp"
     id="protocol-list">
  <div class="new-protocol-container" ng-controller="protoCtrl">
    <h4>Add New Protocol</h4>
    <button type="button" 
            ng-click="toggle()"
            id="id_new">
      <span class="glyphicon glyphicon-plus"></span>
    </button>
    <div ng-hide="visible" class="protocol-new">
      <form name="newProtocolForm" novalidate>
        <input type="text"
               id="id_new_title"  
               placeholder="Title" 
               ng-model="protocol.title"
               required /><br>
        <input type="text"
               id="id_new_desc" 
               placeholder="Description" 
               ng-model="protocol.description"
               required /><br><br>
        <input type="submit"
               id="id_submit_new_protocol" 
               value="New Protocol" 
               ng-click="submit(protocol)"
               ng-disabled="newProtocolForm.$invalid">
      </form>
      {% verbatim %}
      <pre>form = {{ protocol | json}}</pre>
      {% endverbatim %}
    </div>

    <div class="protocol">
      <h4>My Protocols</h4>
      <li ng-repeat="protocol in protocols"> 
        {% verbatim %}   
        <div><a href="/protocols/{{protocol.id}}"><span ng-bind="protocol.title"></span></a></div>
        {% endverbatim %}
        <div> - <span ng-bind="protocol.description"></span>
      </li>
      <br>
    </div>
  </div>
</div>

应用.js

angular.module('protocolApp', [])
.factory('protocolFactory', ['$http', function($http) {
var urlBase = '/api/v1/protocol/';
var protocolFactory = {};
protocolFactory.getProtocols = function() {
  console.log('getProtocols called');
  return $http.get(urlBase);
};
protocolFactory.addProtocol = function(protocol) {
  console.log('addProtocol called');
  return $http.post(urlBase, protocol);
};
return protocolFactory;
}])
.controller('protoCtrl', ['$scope', 'protocolFactory',  
function ($scope, protocolFactory) {
$scope.visible = true;
var self = this;
getProtocols();
function getProtocols() {
  protocolFactory.getProtocols()
    .success(function(data) {
      $scope.protocols = data;
    })
    .error(function(error) {
      console.log('error retrieving protocols');
    });
}      
$scope.toggle = function() {
  $scope.visible = !$scope.visible;
  var self = this;
  var protocol = {};
  self.submit = function() {
    var protocol = {title: self.title, description: self.description};
    console.log('clicked submit with ', self.protocol);
    protocolFactory.addProtocol(self.protocol)
      .success(function(response) {
        console.log('protocol added');
        $scope.protocol = null;
      })
      .error(function(error) {
        console.log('post to api failed');
      });
      // gives the behavior I want, but ultimately crashes chrome 
      // $scope.$watch('protocols', function(newVal, oldVal) {
      //   protocolFactory.getProtocols()
      //     .success(function(data) {
      //       $scope.protocols = data;
      //       console.log('watcher data', data);
      //     });
      //   }, true); 
      };
  };        
}]);

我已经使用 $scope.$watch 函数（注释掉）进行了一些测试，但这要么显示新对象并且永远不会停止（true 已删除）要么不更新（但告诉我数据中有一个额外的对象基于控制台语句）（真实存在）。任何帮助将不胜感激。