JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-controller="myCtrl"> <span>SubTopic {{ modal.option.sSubTopic }}</span>

    <select data-ng-model="modal.option.sSubTopic" data-ng-options="item.id as item.name for item in modal.option.subTopics"></select>
</div>

JavaScript

function myCtrl($scope, $http) {
    // fake the data from the server
    var fakeData = [{
            id: 12132,
            name: "First Item"
        }, {
            id: 45421,
            name: "Second Item"
        }, {
            id: 45754,
            name: "Third Item"
        }];

    $scope.modal = {
        option: {
            subTopics: [],
            sSubTopic: null
        }
    }

    // Using JSFiddle's AJAX API
    // The payload needs to be passed a certain way, that is what all this is.
    $http.post('/echo/json/', $.param({json:JSON.stringify(fakeData)}), {
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function (data) {
        $scope.modal.option.subTopics = data;
        $scope.modal.option.sSubTopic = data[1].id;
    });
}