JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css">
<div ng-app="blog.jdriven">
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <div ng-controller="UselessInnerCtrl">
      <span>{{remaining()}} of {{todos.length}} remaining</span>
      [ <a href="" ng-click="archive()">archive</a> ]
    </div>
    <ul class="unstyled">
      <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </li>
    </ul>
    <form ng-submit="addTodo()">
      <input type="text" ng-model="todoText"  size="30"
             placeholder="add new todo here">
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>
</div>

CSS

.done-true {
  text-decoration: line-through;
  color: grey;
}

JavaScript

'use strict';

function TodoCtrl($scope) {

  //This will raise an TypeError
//  $scope.justAProperty = 'value';

  $scope = $scope.declare({
    todos: [
      { text:'learn angular', done:true },
      { text:'build an angular app', done:false }
    ],
    todoText: '',

    addTodo: function() {
      this.todos.push({ text: this.todoText, done:false });
      this.todoText = '';
      
      // also this will raise a TypeError
//      this.someThingNew = 'is not allowed';
    },

    remaining: function() {
      var count = 0;
      angular.forEach(this.todos, function(todo) {
        count += todo.done ? 0 : 1;
      });
      return count;
    },

    archive: function() {
      var self = this;
      var oldTodos = this.todos;

      this.todos = [];
      angular.forEach(oldTodos, function(todo) {
        if (!todo.done) {
          self.todos.push(todo);
        }
      });
    }
  });
    
  $scope.$watch('remaining()', function(value) {
    // Finally... still isn't allow either
//    $scope.aCalculatedValue = value * 10;
  });
}

function UselessInnerCtrl($scope) {

}


angular.module('blog.jdriven', ['jdStrictScope']);


// ===== declaration of the "jdStrictScope" AngularJS module =====
(function() {
'use strict';

var defineGetterAndSetterProperty = function(sourceObject, targetObject, property) {
  Object.defineProperty(targetObject, property, {
    set: function (newValue) {
      sourceObject[property] = newValue;
    },              
    get: function () {
      return sourceObject[property];
    }
  });        
};


var copyScopeProperties = function(sourceObject, targetScope) {
  angular.forEach(sourceObject, function(value, key) {
    targetScope[key] = angular.isFunction(value) ? angular.bind(targetScope, value) : value;
  });
};


var createUndeclaredScope = function(scope) {
  var UndeclaredScope = function() {
    var self = this;

    this.declare = function(obj) {
      copyScopeProperties(obj, scope);

      return...