JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-controller="MyCtrl">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-2">
                <div class="dropdown">
                    <button class="btn btn-sm" style="cursor: pointer" data-toggle="dropdown">{{persons_selected.name}} <span class="caret"></span></button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1" style="cursor: pointer">
                        <li role="presentation" ng-repeat="person in persons">
                            <a role="menuitem" tabindex="-1" class="clickable" ng-click="persons_processSelection(person)">{{person.name}}</a>
                        </li>
                    </ul>
                </div>
            </div>
        
            <div class="col-sm-10">
                <span ng-show="persons_selected.id != 0">{{persons_selected.name}} ({{persons_selected.id}})</span>
            </div>
        </div>
    </div>
</div>

CSS

body {
    padding: 30px;
}

JavaScript

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

function MyCtrl($scope) {
    
	$scope.persons = [
		{id : 0, name : 'EMPLOYEE'},
		{id : 111, name : 'Jim'},
		{id : 22, name : 'Joe'},
		{id : 43, name : 'Angie'}
		];
	$scope.persons_selected = $scope.persons[0];
	$scope.persons_processSelection = function(person) {
		$scope.persons_selected = person;
	};
}