Help understanding 2-way binding

http://angularjs.org/

by dandoyon

HTML

<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.19/angular-0.9.19.js"></script>

<div ng:controller="PhoneListCtrl">

  Fulltext Search: <input name="query"/>

  <ul class="phones">
    <li ng:repeat="phone in phones.$filter(query)">
        '{{phone.name}}' <span ng:click="phone.name = alt[$index].name;phone.snippet = alt[$index].snippet">[chg]</span>
      <p>{{phone.snippet}}</p>
      
    </li>
  </ul>

</div>

CSS

li {
    display: list-item;
}
ul {
    list-style-type: disc;
}
div {
     margin: 10px;   
}
span {
 cursor: pointer;   
}

JavaScript

/* App Controllers */

function PhoneListCtrl() {

  this.alt = [{"name": "Lexus",
                  "snippet": "Is a cool car"},
                 {"name": "Wifey",
                  "snippet": "Is the boss"},
                 {"name": "ZOOM",
                  "snippet": "I watched as a kid"}];
  this.phones = [{"name": "Nexus S",
                  "snippet": "Fast just got faster with Nexus S."},
                 {"name": "Motorola XOOM™ with Wi-Fi",
                  "snippet": "The Next, Next Generation tablet."},
                 {"name": "MOTOROLA XOOM™",
                  "snippet": "The Next, Next Generation tablet."}];

}