title: Switching data models in AngularJS for dynamic select menus
body: <p>What I am trying to do is have three different <em>&lt;select&gt;</em> menus which will be all be tied into the same data. Changing the first select menu, will change menus 2 and 3's data.</p>
  
  <p>This is the inside of my Controller:</p>
  
  <pre><code>$scope.data = [
          {
              "id" : "0",
              "site" : "Brands Hatch",
              "buildings" : [
                  { "building" : "Building #1" },
                  { "building" : "Building #2" },
                  { "building" : "Building #3" }
              ],
              "floors" : [
                  { "floor" : "Floor #1" },
                  { "floor" : "Floor #2" },
                  { "floor" : "Floor #3" }
              ]
          },{
              "id" : "1",
              "site" : "Silverstone",
              "buildings" : [
                  { "building" : "Building #4" },
                  { "building" : "Building #5" },
                  { "building" : "Building #6" }
              ],
              "floors" : [
                  { "floor" : "Floor #4" },
                  { "floor" : "Floor #5" },
                  { "floor" : "Floor #6" }
              ]
          }
      ];
  </code></pre>
  
  <p>Here's what I have tried from a reference so far, which uses the same idea I need: <a href="http://codepen.io/adnan-i/pen/gLtap" rel="noreferrer">http://codepen.io/adnan-i/pen/gLtap</a></p>
  
  <p>When I select either 'Brands Hatch' or 'Silverstone' from the <em>first</em> select menu, the other two menus will have their data change/update to correspond with the correct data. I am using <em>$watch</em> to listen for changes, which I've taken from the above CodePen link.</p>
  
  <p>Here's the watching script (unmodified and obviously not working):</p>
  
  <pre><code>$scope.$watch('selected.id', function(id){
          delete $scope.selected.value;
          angular.forEach($scope.data, function(attr){
              if(attr.id === id){
                  $scope.selectedAttr = attr;
              }
          });
      });
  </code></pre>
  
  <p>As far as I know, this deletes the current data on change, then loops through <em>$scope.data</em> and if the attr.id matches the id passed into the function, it pushes the data back to the scope which updates the views. I am just really stuck on structuring this and would appreciate some guidance and help as I am really new to AngularJS. Thank you! :)</p>
  
  <p>jsFiddle for the full workings if anyone can help out:
  <a href="http://jsfiddle.net/sgdea/" rel="noreferrer">http://jsfiddle.net/sgdea/</a></p>