JSFiddle - React, Tailwind, and code Playground

HTML

<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">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/libs/checklist-model.js"></script>
<h4>Angular-xeditable Checklist (Bootstrap 3)</h4>

<div ng-app="app" ng-controller="Ctrl">
     <h3>Standard Example</h3>
 <a href="#" editable-checklist="user.status" e-ng-options="s.value as s.text for s in statuses">{{ showStatus() }}</a>

    <hr />
    
    <div>
         <h3>Checklist</h3>

        <form editable-form name="editableForm">
            <div ng-show="editableForm.$visible">
                 <h4>Select one or more feeds</h4>
                <span editable-checklist="feedSource"
                      e-ng-options="feed.id as feed.value for feed in feedSource"
                      onbeforesave="updateFeed(feedSource, $data)">
                </span>

            </div>
            <div ng-show="!editableForm.$visible">
                 <h4>Selected Source Feed(s)</h4>

                <ul>
                    <li ng-repeat="feed in userFeeds.feeds">{{ feed.value || 'empty' }}</li>
                    <div ng-hide="userFeeds.feeds.length">No items found</div>
                </ul>
            </div>
          
            
            <div class="buttons">
                <!-- button to show form -->
                <button type="button" class="btn btn-default" ng-click="editableForm.$show()" ng-show="!editableForm.$visible">Edit</button>
                <!-- buttons to submit / cancel form --> <span ng-show="editableForm.$visible">
        <button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting">
          Save
        </button>
        <button type="button"...

CSS

div[ng-app] {
    margin: 50px;
}
.editable-input label {display:block;}

JavaScript

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

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


app.controller('Ctrl', function ($scope, $filter) {
    $scope.user = { status: [2, 3] };

    $scope.statuses = [
        { value: 1, text: 'status1' },
        { value: 2, text: 'status2' },
        { value: 3, text: 'status3' }
    ];

    $scope.showStatus = function () {
        var selected = [];
        angular.forEach($scope.statuses, function (s) {
            if ($scope.user.status.indexOf(s.value) >= 0) {
                selected.push(s.text);
            }
        });
        return selected.length ? selected.join(', ') : 'Not set';
    };



    // ---- Checkbox filter example ----
    $scope.filterStatus = function (obj) {
        return $scope.user.status.indexOf(obj.value) > -1;
    };



    // ---- Feeds Example --------------------------
    $scope.userFeeds = {
        feeds: []
    };
    
    $scope.selectedIds = [];

    $scope.feedSource = [
        { id: 1, value: 'All MD' },
        { id: 2, value: 'All DE' },
        { id: 3, value: 'All DC' }
    ];

    
    $scope.updateFeed = function (feedSource, option) {
        $scope.userFeeds.feeds = [];
        angular.forEach(option, function (v) {
            var feedObj = $filter('filter')($scope.feedSource, { id: v });
            if (feedObj.length) {
                $scope.userFeeds.feeds.push(feedObj[0]);
            }
        });
        return $scope.userFeeds.feeds.length ? false : 'Not set';
    };
});