JSFiddle - React, Tailwind, and code Playground

by Michael Bazos

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="DemoCtrl">
    <div class="form-group">
        <label class="col-sm-2 control-label">Select a plate:</label>
        <div class="col-sm-5">
            <select class="form-control m-b-sm" id="plateId" ng-model="selectedPlate.item" ng-options="plate as (plate.id + ' - ' + plate.serial_number) for plate in plates" required="true">
                <option value="">----------</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="input-readonly" class="col-sm-2 control-label">Plate Type:</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="input-readonly" value="{{typesById[selectedPlate.item.plate_types_id].name}}" readonly>
        </div>
    </div>
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('DemoCtrl', function ($scope) {

    $scope.selectedPlate = {};

    var plateTypes = [{
        "id": 1,
            "name": "Sibyl Streich",
            "description": "Necessitatibus.",
            "document_id": 7,
            "created_at": "2015-10-21 18:42:25",
            "updated_at": "2015-10-21 18:42:25"
    }, {
        "id": 2,
            "name": "Second Streich",
            "description": "Necessitatibus.",
            "document_id": 7,
            "created_at": "2015-10-21 18:42:25",
            "updated_at": "2015-10-21 18:42:25"
    }];

    $scope.plates = [{
        "id": 2,
            "plate_types_id": 2,
            "project_id": 1,
            "deleted_at": null,
            "created_at": "2015-10-21 18:42:26",
            "updated_at": "2015-10-21 18:57:27",
            "serial_number": "SN Plate 2"
    }, {
        "id": 1,
            "plate_types_id": 1,
            "project_id": 1,
            "deleted_at": null,
            "created_at": "2015-10-21 18:42:26",
            "updated_at": "2015-10-21 18:57:27",
            "serial_number": "SN Plate 1"
    }];


    // Transforming plateTypes
    $scope.typesById = {};
    plateTypes.forEach(function (type) {
        $scope.typesById[type.id] = type;
    });


});