AngularJS Example

by Alex

HTML

<div ng-app="">
  <div ng-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}];f=friends[1];fn='Mary';log=function(){console.log('log')}">
    I have {{friends.length}} friends. They are:

    <ul>
      <li ng-repeat="friend in friends">
        <label>
          <input type="radio" name="friends" ng-model="$parent.fn" value="{{friend.name}}" ng-change="log('f',$parent)" />
          {{friend.name}}


        </label>
      </li>
    </ul>

    {{f}}

    {{fn}}


  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="https://code.angularjs.org/1.0.8/angular.min.js"></script>
<style>
​.ng-invalid { border: 1px solid red; }​
ul,li{
  list-style-type:none
}