JSFiddle - React, Tailwind, and code Playground

by ryanbrill

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div ng-controller="MainCtrl">   
    <div testing ng-model="data" vals="data">
        <p>{{dirData.val}}!</p>
    </div>
</div>

JavaScript

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

app.controller('MainCtrl', function($scope, $timeout) {
    $scope.data = obj1;
    $timeout(function() {
        $scope.data = obj2;
    }, 1000);
});

// General use data table
app.directive('testing', function ($rootScope) {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            vals: '='
        },
        // The linking function will add behavior to the template
        link: function(scope, element, attrs, model) {
            scope.$watch('vals', function(newVal, oldVal) {
                console.log(newVal);
                scope.dirData = newVal;
            }, true);
        }
    };
});

var obj1 = {
    'val': 10
},
obj2 = {
    'val': 20    
};