JSFiddle - React, Tailwind, and code Playground

by Seetpal Singh

HTML

<br><br>

<div ng-app="varApp" ng-controller="TodoCtrl"> 

    <ul>
        <li ng-repeat='x in tasks | limitTo: limitNumber'>
            <span class='fl'>{{x.Name }}</span><span class='fr'>{{x.City}}</span>
        </li>
    </ul>
    
</div>

<button class='fr' id='button'>stich here</button>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<style>

.ng-invalid { 
    border: 1px solid red; 
}
.special{ background: red; }
li{
    list-style:none;
    overflow:hidden; 
    border-bottom: 1px #999 solid;
    padding:4px}
.fr{
    float:right
}
.fl{
    float:left
}

JavaScript

angular.module('varApp', [])

.controller('TodoCtrl', function($scope, $http) {
    
    $http.get('http://www.w3schools.com/website/Customers_JSON.php')
    .success(function(data){    
        
        $scope.tasks = data;
        
        $scope.limitNumber = 5;
    })
    
});

$('#button').click(function(){
    
      alert(angular.element(document.querySelector('[ng-controller="TodoCtrl"]')).scope().tasks[1].Name);
            
});