JSFiddle - React, Tailwind, and code Playground

HTML

<h2>AngularJS</h2>

<div ng-app>
    <div ng-controller="HogeController">
        <!-- ng-model -->
        <input ng-model="ngModel">
        <div>AngularJSは{{ngModel}}で指定した入力値と連動する</div>
        <hr>
        <!-- ng-repeat -->
        <div ng-repeat="v in ngRepeat">
            <p>{{v}}</p>
        </div>
        <hr>
        <!-- ng-init -->
        <input ng-model="ngInit1">
        <div ng-init="ngInit2()">AngularJSのng-initは読み込み時に呼ばれるので初期値設定とかに使える</div>
        <hr>
        <!-- ng-show -->
        <input ng-model="ngShow">
        <div ng-show="ngShow === 'ngShow!!'">AngularJSのng-showはCSSのdisplayプロパティで表示・非表示を切り替える</div>
        <hr>
        <!-- ng-hide -->
        <input ng-model="ngHide">
        <div ng-hide="ngHide === 'ngHide!!'">AngularJSのng-hideはng-showの逆の判定で表示・非表示を切り替える</div>
        <hr>
        <!-- ng-if -->
        <input ng-model="ngIf">
        <div ng-if="ngIf === 'ngIf!!'">AngularJSのng-ifはng-show,ng-hideと違って中の要素ごと削除する</div>
        <hr>
        <!-- ng-class -->
        <input ng-model="ngClass">
        <div ng-class="{'ng-class-red': ngClass === 'red', 'ng-class-blue': ngClass === 'blue'}">AngularJSのng-classは条件trueになるclassを要素につけられる</div>
        <hr>
        <!-- ng-click -->
        <div ng-click="ngClick()">AngularJSのng-clickは要素にclickイベントをつけられる</div>
    </div>
</div>

CSS

.ng-class-red {
    color: red;
}
.ng-class-blue {
    color: blue;
}

JavaScript

function HogeController($scope, $location) {
    $scope.ngModel = "ng-model";
    $scope.ngRepeat = ["AngularJSは", "ng-repeatで", "repeatする"];
    $scope.ngInit1 = "ngInit1!!";
    $scope.ngInit2 = function () {
        $scope.ngInit1 = "ngInit2!!"
    };
    $scope.ngShow = "ngShow!!";
    $scope.ngHide = "ngHide!!?";
    $scope.ngIf = "ngIf!!";
    $scope.ngClass = "red";
    $scope.ngClick = function () {
        alert('ngClick!!');
    };
}