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="ctrl.contentType.dataPlus"></data-form-select>                       
{{ctrl.configService.admin.contentTypeId}}        
{{ctrl.contentType.dataPlus| filter:{id: 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: '<div><span>{{label}}</span><select id="{{id}}" ng-change="ngChange()" ng-model="ngModel" ng-options="item.id as item.name for item in options"></div>',
        controller: function ($scope, $element, $attrs) {            
            $scope.label = $attrs.label;
            $scope.id = $attrs.id;            
        }
    };
});