Angularjs ng-option with Semantic UI drop-down

HTML

<script src="http://semantic-ui.com/build/packaged/javascript/semantic.js"></script>
<link rel="stylesheet" href="http://semantic-ui.com/build/packaged/css/semantic.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!doctype html>
<html ng-app="App">
    
    <body ng-controller="MainCtrl">
        	<h3>Option 1 (standard)</h3>

        <select ng-model="selectedItem" ng-options="c as (c.id + ' - ' + c.name) for c in containers">
            <option value="">-- Pick A Container --</option>
        </select>
        <br>ID: {{selectedItem.id}}
        <br>Name: {{selectedItem.name}}
         <h3><a href="http://semantic-ui.com/modules/dropdown.html"> Semantic UI Dropdown</a></h3>

        <div class="ui selection dropdown ">
            <input name="id" type="hidden" value="0">
            <div class="text">-- Pick A Container --</div>	<i class="dropdown icon"></i>	
            <div class="menu transition hidden">
                <div class="item active">-- Pick A Container --</div>
                <div data-value="{{container.id}}" class="item" ng-repeat="container in containers">{{container.name}}</div>
            </div>
    </body>

</html>

JavaScript

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

app.controller('MainCtrl', function($scope) {
  $scope.containers = [
  {id: 1, name: 'Box1'},
  {id: 2, name: 'Box2'},
  {id: 3, name: 'Box3'}];
  
  //$scope.selectedItem = $scope.containers[0];
});

$('.ui.dropdown').dropdown();