JSFiddle - React, Tailwind, and code Playground

by Bogac Guven

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/superhero/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
	<div id="page" ng-controller="MainCtrl">
		<header></header>
		<section id="body" ng-init="countMis = {num:0}">
		<div class="row">	
			<section id="main" class="container">

			 <div class="col-md-6 col-md-offset-3">
                <h3> Demo App To Set Parent Scope Var in Child Expression</h3>
			    <div class="table-responsive">
					<table class="table table-striped table-bordered mytable">
						<thead>
							<tr>
								<th class="headercl">Capitals</th>
								<th class="headercl">Minuscules By <br/>Angular Filter</th>
								<th class="headercl">Minuscules In Scope</th>
								<th class="headercl"> </th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="upperCaseLetter in alphabet.specialsUpper" ng-controller="letterController">
								<td>{{upperCaseLetter}}</td>
								<td>{{filteredLetter=(upperCaseLetter | lowercase)}}</td>
								<td>{{alphabet.specialsLower[$index]}}</td>
								<td><span ng-class="lowercaseEqual($index,filteredLetter)"></span></td>
							</tr>
						</tbody>
					</table>
			    </div>
               Mismatches by counting class: {{numItems('glyphicon-remove')}}
                 <br/>
               Count Mismatches in Expression: {{countMis.num}}  
			 </div>

			</section>
		</div>
		</section>
	</div>

CSS

th.headercl
{
 font-size: 18px;
 line-height: 18px;
 padding-bottom: 20px;
 text-align: top;
}

table.table td{
	font-size: 22px;
}

JavaScript

'use strict';
var checkApp = angular.module('demoApp',[]);
checkApp.controller('MainCtrl', mainCtrl);
checkApp.controller('letterController', letterController);

function mainCtrl($scope, $window) 
{

	$scope.alphabet = {
	specialsLower: ['a','b','c','d','e','f','g'],
	specialsUpper: ['A','B','C','X','E','Z','G']
	};

	$scope.numItems = function(className) {
    		return $window.document.getElementsByClassName(className).length;
		};
};

function letterController($scope)
{
	$scope.lowercaseEqual = function(indx,letter)
	{		
		var returnStr="";

		if(letter == $scope.alphabet.specialsLower[indx])
		{
			 returnStr = "glyphicon glyphicon-ok";
		}
		else
		{	
			$scope.countMis.num = $scope.countMis.num + 1;
			returnStr = "glyphicon glyphicon-remove";
		}
		
		return returnStr;
	};
	
}