title: Updating ng-repeat scope removes unexpected items not in ng-repeat
body: <p>Why is my sortable angular ng-repeat menu deleting everything after the sorted menu item?
  <a href="https://github.com/RubaXa/Sortable/tree/dev" rel="nofollow">https://github.com/RubaXa/Sortable/tree/dev</a>
  I am using RubaXa's Sortable library with angular to make a sortable menu system for a custom CMS. When the menu gets sorted I have a this code loop through all menu items, record their location and update the $scope.menus. </p>
  
  <pre><code>            var menus = {};
              jQuery('.mb-draggable').has('a[href!="#"]').each(function(i, menuItem) {
                  var location = jQuery(menuItem).parent('[data-menu]').data('menu');
                  var position = jQuery('[data-menu="' + location + '"]').children('.mb-draggable').has('a[href!="#"]').index(jQuery(menuItem));  
                  var id = jQuery(menuItem).data('id');
  
                  //findMenuById finds the index and data of the menu item that has a matching id
                  var found = theme.findMenuById($scope.menus, id);
                  var newData = found.data;
                  newData.location = location;
                  newData.position = position;
                  if(!menus[location]) {
                      menus[location] = [];
                  }
                  menus[location][position] = newData;
              });
              $scope.menus = menus;
              console.log('$scope.menus', $scope.menus);
              $scope.$apply();
  </code></pre>
  
  <p>$scope.menus has two different properties .main and .footer and each of these holds an array of menu list items. When I make $scope.menus = menus the $scope.menus is correct but the view suddenly gets rid of the footer menu and the editing buttons, which are not within ng-repeat.
  Here is the jade for the menu.</p>
  
  <pre><code>#navbar.navbar-collapse.collapse
          ul#sortable-head.nav.navbar-nav(data-menu="main")
              li(ng-repeat="menu in menus.main" class="mb-draggable {{menu.classes}}" ng-class="active(menu.url)" data-id="{{menu.id}}")
                  a(href="{{menu.url ? menu.url : /}}" target="{{menu.target}}").mb-editable.mb-main-list-a {{menu.title}}
              li.drop-down
                  a(data-toggle="dropdown" href="#").dropdown-toggle 
                      | Blog
                      span.caret
                  ul#sortable-footer.dropdown-menu(role="menu" data-menu="footer")
                      li(ng-repeat="menu in menus.footer" data-id="{{menu.id}}").mb-draggable
                          a(href="{{menu.url ? menu.url: /}}" target="{{menu.target}}").mb-editable.mb-footer-list-a {{menu.title}}
  </code></pre>
  
  <p>The editing buttons are added on with jQuery </p>
  
  <pre><code>jQuery('[data-menu]').append($compile('&lt;li data-toggle="modal" data-target="#editMenuItemModal" ng-click="selectedMenu($event)" class="mb-edit-menu-item"&gt;&lt;a href="#"&gt; &lt;i class="fa fa-pencil fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;')($scope));
  </code></pre>