在AngularJS中，如何将多个下拉列表和文本控件绑定在一起

我所做的是使用一个预先存在的HTML模板，我正在浏览它上的所有元素，将其转换为AngularJS，只是为了学习目的和最佳实践。

我有一个部分供用户更改其状态（联机、外出、忙碌）。HTML如下所示：

<div class="sidebar-right-header" data-ng-controller="SidebarRightController">
    <div class="pull-right posr" dropdown>
        <a href class="dropdown-toggle">
            <i class="fa fa-circle fs8" data-ng-class="{
                'text-green2': userStatus.online,
                'text-red2': userStatus.busy,
                'text-orange2': userStatus.away}">
            </i> <span class="caret text-muted"></span>
        </a>
        <ul class="dropdown-menu dropdown-sm" role="menu">
            <li class="menu-arrow">
                <div class="menu-arrow-up"></div>
            </li>
            <li data-ng-click="SwitchStatus('Online')"><a href="javascript:void(0);"><i class="fa fa-circle text-green2 pr5"></i> Online</a></li>
            <li data-ng-click="SwitchStatus('Busy')"><a href="javascript:void(0);"><i class="fa fa-circle text-red2 pr5"></i> Busy</a></li>
            <li class="divider"></li>
            <li data-ng-click="SwitchStatus('Away')"><a href="javascript:void(0);"><i class="fa fa-circle text-orange2 pr5"></i> Away</a></li>
        </ul>
    </div>
    <div class="media mtn"> <a class="pull-left mt5" href="#"> <img class="thumbnail thumbnail-sm rounded" src="img/avatars/2.jpg" alt="..."> </a>
        <div class="media-body">
            <h5 class="small mt5 mbn text-cloud"><b>Current Status:</b></h5>
            <h5 class="small text-white"><b>{{statusText}}</b></h5>
        </div>
    </div>
</div>

我问了另一个让我开始的问题，即使用ngClass指令来处理状态。您可以在上面示例的顶部看到它。我创建了一个与下拉选择关联的函数，名为SwitchStatus（）。最后一个问题是｛｛statusText｝｝，因为我不知道如何正确绑定它。我的意思是，我可以。。。但我的控制器变得笨重，我只知道我做事情的效率很低。

这是我的控制器：

function($scope) {
    var userStatuses = {
       online: true,
       busy: false,
       away: false
    };
    $scope.statusText = GetStatusText();
    function GetStatusText() {
        var text;
        switch(userStatuses) {
            case userStatuses.busy === true:
                text = "I'm busy...";
                break;
            case userStatuses.away === true:
                text = "I'm away...";
                break;
            default:
                text = "I'm online!";
        }
        return text;
    }
    $scope.SwitchStatus = function(option) {
        console.log(option);
        if ( option === 'Online' ) {
            userStatuses.online = true;
        } else if ( option === 'Busy' ) {
            userStatuses.busy = true;
            userStatuses.online = false;
            userStatuses.away = false;
        } else if ( option === 'Away' ) {
            userStatuses.online = false;
            userStatuses.busy = false;
            userStatuses.away = true;
        }
    };
   $scope.userStatus = userStatuses; // default online

}

最后（当我弄清楚自己在做什么时），我想把高级逻辑与这些选择联系起来，所以我想确保我的控制器的结构能够在以后轻松处理。

结论：试图获得与用户状态的流畅绑定，包括状态文本和表示绿点的类。你可以看到字体真棒"fa fa circle"等。现在，当切换状态时，ngClass部分工作，但状态文本不工作。

希望我不是在问一个愚蠢的问题：）