Bootstrap dropdown buttons w/ Knockout

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">

  <!-- Content Table -->
  <div class="content">
    <h1>Articles (<span data-bind="text: articles().length"></span>)</h1>
    <table class="table table-hover">
      <thead>
        <!-- Headers -->
        <tr>
          <th>Category</th>
          <th>Section</th>
          <th>Date</th>
          <th>Status</th>
        </tr>
      </thead>
      <!-- Article Loop -->
      <tbody data-bind="foreach: articles">
        <tr>
          <td data-bind="text: section"></td>
          <td data-bind="text: category"></td>
          <td data-bind="text: date"></td>
          <td>
            
            <!-- Select to demonstrate that my stylings are working on the bootstrap dropdown. This should not be here in production -->
              <select data-bind="options: $root.availableStatus, value: status, optionsText: 'statusName'"></select>
            

            <div class="btn-group">
              <!-- Change button type based on status -->
              <button type="button" class="btn btn-small dropdown-toggle" data-bind="css: {'btn-default' : status().statusName=='Matched', 'btn-danger' : status().statusName=='None', 'btn-info' : status().statusName=='Set'}" data-toggle="dropdown">

                <!-- Add Glyph based on status -->
                <span class="glyphicon" data-bind="css: {'glyphicon-ok' : status().statusName=='Matched', 'glyphicon-remove' : status().statusName=='None', 'glyphicon-list' : status().statusName=='Set'}"></span> <span data-bind="text: status().statusName"> </span> <span class="caret"></span>
              </button>

              <!-- Loop for status -->
              <ul class="dropdown-menu" role="menu" data-bind="foreach:...

JavaScript

// Class to represent a row in the content grid
function Article(section, category, date, initialStatus) {
    var self = this;
    self.section = section;
    self.category = category;
    self.date = date;
    self.status = ko.observable(initialStatus);
}

// Overall viewmodel for this screen, along with initial state
function ContentViewModel() {
    var self = this;

    // Non-editable catalog data - would come from the server
    self.availableStatus = [
        { statusName: "Matched" },
        { statusName: "None" },
        { statusName: "Set" }
    ]; 


    // Editable data
    self.articles = ko.observableArray([
        new Article("Sports", "Football", "8/14/2013", self.availableStatus[0]),
        new Article("Sports", "Baseball", "8/13/2013", self.availableStatus[1]),
        new Article("Sports", "College", "8/12/2013", self.availableStatus[2]),
    ]);
}


ko.applyBindings(new ContentViewModel());