JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sampleApp">
    <div ng-controller="sampleController">
    control with static ng-bind : <input type='text' ng-bind='{{test}}' id='txtInput' />
    <br/>
      control with static ng-model : <input type='text' ng-model='test' id='txtInput' />
      <br />
       control with dynamic (ng-model) : <input type='text' id='txtInput' />
        <br /> Span with static (ng-bind) : <span ng-bind='test'></span>
        <br />
 Span with static (ng-model) : <span ng-model='test'></span>
        <br />Span with static expression : <span>{{test}}</span>

        <br />Span with Dynamic : <span id='spanTest'></span>

        <br />
        <button id='btnClick' ng-click='testSample()'>click</button>
    </div>
</div>

JavaScript

angular.module("sampleApp", [])
    .controller("sampleController", function ($scope, $compile) {
    $scope.test = 'hai this is test content';
    $scope.testSample = function () {
        var elmSpan = $('#spanTest');
        $(elmSpan).attr('ng-bind', 'test');
        $compile(elmSpan)($scope);
        var elmTextbox = $('#txtInput');
        $(elmTextbox).attr('ng-model', 'test');
        $compile(elmTextbox)($scope);
    };
});