JSFiddle - React, Tailwind, and code Playground

by BinaryMuse

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MainController'>
  <p>Select your favorite project:</p>
  <label ng-repeat="project in projects">
    <input type="radio" ng-model="data.favoriteProjectId" value="{{project.id}}"
           ng-change="data.favoriteProject = project;">{{project.name}}</input>
  </label>
  
  <p ng-show="data.favoriteProjectId">
    Your favorite project ID is {{data.favoriteProjectId}}
    and your favorite project is {{data.favoriteProject.name}}.
  </p>
</div>

JavaScript

// http://stackoverflow.com/a/14352432/62082

var app = angular.module('myApp', []);

// Simulating an asynchronous API here
app.factory('Project', function($q, $rootScope) {
  var projects = [
    { id: '123', name: 'Yeoman', watchers: '1233' },
    { id: '124', name: 'Grunt', watchers: '4343' },
    { id: '125', name: 'Angular', watchers: '56789' }
   ];
  
  return {
    query: function(cb) {
      var deferred = $q.defer();
      setTimeout(function() {
        $rootScope.$apply(function() { deferred.resolve(projects); });
      }, 50);
      return deferred.promise;
    }
  };
});

app.controller('MainController', function($scope, Project) {
  $scope.projects = Project.query();
  $scope.data = {
    favoriteProjectId: null,
    favoriteProject: null
  };
});