JSFiddle - React, Tailwind, and code Playground

by TheFiddler

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">

<div ng-app="app" ng-controller="Ctrl">
  <a href="#" editable-select="userCareerLevel.careerlevelid" e-multiple e-ng-options="s.careerlevelid as s.name for s in careerlevels">
    {{ showCareerLevelsStatus() }}
  </a>
</div>

CSS

div[ng-app] { margin: 50px; }

JavaScript

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope, $filter) {
  $scope.userCareerLevel = {
    careerlevelid: [2, 4]
  }; 

  $scope.careerlevels = [
    {"careerlevelid":7, "name": "Part Time"},
	{"careerlevelid":1, "name": "Intern"},
	{"careerlevelid":2, "name": "$15,000 - $35,000 - Entry Level"},
	{"careerlevelid":3, "name": "$35,000 - $70,000 - Manager"},
	{"careerlevelid":4, "name": "$70,000 - $100,000 - Director"},
	{"careerlevelid":6, "name": "$100,000+ - VP/General Manager"}
  ]; 

  $scope.showCareerLevelsStatus = function() {
    var selected = [];
    angular.forEach($scope.careerlevels, function(s) { 
      if ($scope.userCareerLevel.careerlevelid.indexOf(s.careerlevelid) >= 0) {
        selected.push(s.name);
      }
    });
    return selected.length ? selected.join(', ') : 'Not set';
  };
});