<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<link data-require="bootstrap-css@*" data-semver="2.3.2" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" />
<!--<link data-require="bootstrap-css@*" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
-->
<link data-require="select2@*" data-semver="3.4.2" rel="stylesheet" href="https://rawgithub.com/ivaynberg/select2/3.4.2/select2.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery@*" data-semver="1.9.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script data-require="select2@*" data-semver="3.4.2" src="https://rawgithub.com/ivaynberg/select2/3.4.2/select2.js"></script>
<script data-require="angular.js@*" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script data-require="angular-ui@*" data-semver="0.0.2" src="http://rawgithub.com/angular-ui/ui-select2/master/src/select2.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Control">
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row-fluid">
<div class="span3 bs-bordered">
<form>
<fieldset>
<div class="control-group">
<label>This uses ui-select</label>
<div class="controls">
<select
ui-select2="{width:'resolve',dropdownAutoWidth:true}" style="width:100%" ng-model="selected">
<option ng-repeat="item in items" value="{{item.value}}">{{item.name}}</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span3 bs-bordered">
<form>
<fieldset>
<div class="control-group">
<label>This uses ui-select</label>
<div class="controls">
<select
class="input-block-level"
ui-select2="{width:'resolve',dropdownAutoWidth:true}" ng-model="selected">
<option ng-repeat="item in items" value="{{item.value}}">{{item.name}}</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span3 bs-bordered">
<form>
<fieldset>
<div class="control-group">
<label>This uses ui-select</label>
<div class="controls">
<select
class="input-block-level"
ui-select2="{width:'element',dropdownAutoWidth:true}" ng-model="selected">
<option ng-repeat="item in items" value="{{item.value}}">{{item.name}}</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span3 bs-bordered">
<form>
<fieldset>
<div class="control-group">
<label>This uses select2()</label>
<div class="controls">
<select class="input-block-level" style="width:100%;display:block;box-sizing:border-box" id="e1">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span3 bs-bordered">
<form>
<fieldset>
<div class="control-group">
<label>Basic Select with input-block-level</label>
<div class="controls">
<select class="input-block-level">
<option value="1">something</option>
<option value="2">something else</option>
<option value="3">something more</option>
<option value="4">something less</option>
<option value="5">something that is really long and will spill outsite the regular window</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<pre>{{selected}}</pre>
</div>
</div>
</div>
</body>
</html>
// Code goes here
var app = angular.module('MyApp', ['ui.select2']);
app.controller( "Control",function($scope,$http,$log,$timeout){
$scope.selected = ['3'];
$scope.items = [];
$timeout(
function(){
$http({
method:'get',
url:'data.json'
})
.success(
function(result){
//$log.info(result);
$scope.items = result.items;
$scope.selected = result.selected;
});
} ,0);
});
$(document).ready(function() { $("#e1").select2({width:'resolve'}); });
.bs-bordered{
margin: 0 -20px 0 20px;
padding: 20px 20px 0 20px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/*
*/
{
"items":[
{"value":"1","name":"item 1"},
{"value":"2","name":"item 2"},
{"value":"3","name":"item 3"},
{"value":"4","name":"item 4"},
{"value":"5","name":"item 5"},
{"value":"6","name":"item 6"}
],
"selected":"3"
}