JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div id="ang">
    <div ng-controller="MainCtrl">
         <h1>{{name}}</h1>

    </div>
    <div id="notificationContainer">
        <div ng-controller="MessagesCtrl">
            <div class="btn-notifications-history">
                 <h1>Messages</h1>
{{messages.length}}
                <ul>
                    <li ng-repeat="message in messages">{{message.Subject}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>

JavaScript

var messagesService = {
    messages: [{
        id: 1,
        Subject: "Subject 1"
    }, {
        id: 2,
        Subject: "Subject 2"
    }, {
        id: 3,
        Subject: "Subject 3"
    }],
    getMessages: function (options) {
        var _this = this;
        setTimeout(

        function () {
            options.success(_this.messages);
        }, 500);
    }
};

var app = angular.module("myApp", []);
app.controller("MainCtrl", function ($scope) {
    $scope.name = "Avi";
});
app.controller("MessagesCtrl", function ($scope) {
    $scope.messages = []; // initializing Messages to emoty array
    // get messages from the server (replaces current messages(
    $scope.getMessages = function () {
        /*
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetMessages",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                def("ok", "");
                
                $scope.messages = JSON.parse(result.d);
            },
            error: function (msg) {
                def("error");
            }
        });
        */
        messagesService.getMessages({
            success: function (result) {
                console.log("ok");
                for (var i = 0; i < result.length; i++) {
                    $scope.messages.push(result[i]);
                }
            }
        });

    };
    // get the messages
    messagesService.getMessages({
        success: function (result) {
            console.log($scope.messages);
            $scope.messages = result;
            console.log($scope.messages);
            console.log("ok");
        }
    });
    //$scope.getMessages();
});
angular.bootstrap(document.getElementById("ang"), ["myApp"]);