JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="directiveAPP">
    <div ng-controller="directiveController">
        <data-form-select data-label="Type" data-id="contentTypeSelect" data-ng-change="home.configChanged(true)" ng-model="ctrl.configService.admin.contentTypeId" data-options="item in  ctrl.contentType.dataPlus"></data-form-select>
            {{ctrl.configService.admin.contentTypeId}}
    </div>
</div>

JavaScript

angular.module("directiveAPP", [])
    .controller("directiveController", function ($scope, $rootScope) {
    var admin = [];
    var configService = {
        "admin": admin
    };
    var contentType = {
        "dataPlus": [{
            "id": 1,
                "name": "ABC"
        }, {
            "id": 2,
                "name": "DEF"
        }, {
            "id": 3,
                "name": "GHI"
        }]
    };
    $scope.home = {};
    $scope.ctrl = {
        "configService": configService
    };
    $scope.ctrl.configService.admin["contentTypeId"] = 0;
    $scope.ctrl["contentType"] = contentType;
    $scope.home.configChanged = function (data) {                
    };
}).directive("formSelect", function () {
    return {
        restrict: 'AE',
        require: 'ngModel',
        scope: {
            label: '=',
            id: '=',
            ngChange: "&",
            ngModel: "=",
            options:"@"
        },
        template: '{{options}} <div><span>{{label}}</span><select id="{{id}}" ng-change="ngChange()" ng-model="ngModel" ng-options="{{options}}"><option value="1">1</option><option value="2">2</option></select></div>',
        controller: function ($scope, $element, $attrs) {            
            $scope.label = $attrs.label;
            $scope.id = $attrs.id;            
        }
    };
});