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.favoriteProject" ng-value="project">{{project.name}}</input>
  </label>
  
  <p ng-show="data.favoriteProject">
    Your favorite project is {{data.favoriteProject.name}}; it has {{data.favoriteProject.watchers}} watchers.
  </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() {
      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 = {
    favoriteProject: null
  };
});