ui-choices

Button Toggled?:

{{fruit1}}

Source Code

<toggle class="btn-success" ng-model="fruit1"/>

Your Choices:

{{fruit2}}

Source Code

<choices ng-model="fruit2">
    <choice value="banana"> Banana <choice>
    <choice value="graphfruit"> Graphfruit <choice>
    <choice value="pitaya"> Pitaya <choice>
<choices>

Your Choice:

{{fruit3}}

Source Code

<choices multi ng-model="fruit3">
    <choice value="banana"> Banana <choice>
    <choice value="graphfruit"> Graphfruit <choice>
    <choice value="pitaya"> Pitaya <choice>
<choices>

Your Choice:

{{fruit4}}

Source Code

<choices multi ng-model="fruit4">
    <choice value="banana" active> Banana <choice>
    <choice value="graphfruit"> Graphfruit <choice>
    <choice value="pitaya"> Pitaya <choice>
<choices>

Your Choice:

{{fruit5}}

Source Code

<choices multi ng-model="fruit5">
    <choice value="banana" fallback active> Banana <choice>
    <choice value="graphfruit"> Graphfruit <choice>
    <choice value="pitaya"> Pitaya <choice>
<choices>

Your Choice:

{{fruit6}}

Source Code

<choices multi btn-type="btn-danger" ng-model="fruit6">
    <choice value="banana" fallback active btn-type="btn-success"> Banana <choice>
    <choice value="graphfruit"> Graphfruit <choice>
    <choice value="pitaya"> Pitaya <choice>
<choices>

Your Choice:

{{fruit7}}

Source Code

<choices multi data-type="array" btn-type="btn-danger" ng-model="fruit7">
    <choice value="banana" fallback active btn-type="btn-success"> Banana <choice>
    <choice value="graphfruit"> Graphfruit <choice>
    <choice value="pitaya"> Pitaya <choice>
<choices>

Your Choice:

{{fruit71}}

Source Code

<choices data-type="single" btn-type="btn-danger" ng-model="fruit71">
    <choice value="banana" fallback active btn-type="btn-success"> Banana <choice>
    <choice value="graphfruit"> Graphfruit <choice>
    <choice value="pitaya"> Pitaya <choice>
<choices>

8. Customize Button Content

Your Choice:

{{fruit8}}

Source Code

<choices ng-model="fruit8">
    <choice value="banana" btn-type="btn-success">
      <i class="glyphicon glyphicon-ok">60;i> Banana
    <choice>
    <choice value="graphfruit" btn-type="btn-warning">
      <i class="glyphicon glyphicon-exclamation-sign">60;i> Graphfruit
    <choice>
    <choice value="pitaya" btn-type="btn-danger">
      <i class="glyphicon glyphicon-remove">60;i> Pitaya
    <choice>
<choices>

Your Choice:

{{fruit9}}

Is Banana Chosen?

{{isBananaChosen}}

Source Code

<choices ng-model="fruit9">
    <choice value="banana" btn-type="btn-success" ng-model="isBananaChosen">
      <i class="glyphicon glyphicon-ok">60;i> Banana
    <choice>
    <choice value="graphfruit" btn-type="btn-warning">
      <i class="glyphicon glyphicon-exclamation-sign">60;i> Graphfruit
    <choice>
    <choice value="pitaya" btn-type="btn-danger">
      <i class="glyphicon glyphicon-remove">60;i> Pitaya
    <choice>
<choices>

Your Choice:

{{fruit10}}

Source Code

<choices ng-model="fruit10.q1" btn-type="btn-list">
    <choice value="banana" fallback> Banana <choice>
    <choice value="graphfruit"> Graphfruit <choice>
    <choice value="pitaya"> Pitaya <choice>
<choices>
... (ignored)

Stylesheet

.btn-list {
  display: block;
  clear: both; background: none;
  border: none; color: #000;
  box-shadow: none!important;
}
.btn-list:before {
  display: inline-block;
  width: 13px; height: 13px;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
  margin: 2px 3px 0 0;
  veretical-align: text-top;
  content: " ";
}
.btn-list.active { box-shadow: none; }
.btn-list.active:before { background: #092; }

11. With 'ng-repeat'

Your Choices:

{{fruit11.value}}

Source Code

<choices ng-model="fruit11.value" btn-type="btn-default" multi="fruit11.multi">
  <choice ng-repeat="d in fruit11.data" ng-data="d"> {{d.name}} <choice>
<choices>

Content of fruit11.data

... (ignored)
$scope.fruit11 = {
  multi: true,
  value: {},
  data: [
    { name: "Banana", value: 1, btntype: 'btn-primary' },
    { name: "Graphfruit", value: 2 },
    { name: "Pitaya", value: 3, active: true }
]}

12. With 'ng-repeat', both choices and choice

Your Choices:

{{fruit12[0].value}}
{{fruit12[1].value}}
{{fruit12[2].value}}

Source Code

<choices ng-repeat="c in fruit12" ng-model="c.value" btn-type="btn-list" multi="c.multi">
  <div style="clear: both"> {{ c.name }}
  <choice ng-repeat="d in c.data" ng-data="d"> {{d.name}} <choice>
<choices>

Content of fruit12

$scope.fruit12 = [
  { name: "breakfast?", multi: true, value: {}, data: [
    { name: "Banana", value: 1, fallback: true },
    { name: "Graphfruit", value: 2 },
    { name: "Pitaya", value: 3, active: true }
  ]},
  ... (ignored)
]

Button Toggled?:

{{fruit13}}

Source Code

<toggle class="ui button" ng-model="fruit13"/>

Your Choices:

{{fruit14}}

Source Code

<choices class="ui buttons" ng-model="fruit14" btn-type="ui button">
    <choice value="banana" active> Banana <choice>
    <choice value="graphfruit"> Graphfruit <choice>
    <choice value="pitaya"> Pitaya <choice>
<choices>

Your Choice:

{{fruit15}}

Source Code

<choices class="ui buttons" multi ng-model="fruit15" btn-type="ui button">
    <choice class="green" value="banana" fallback active> Banana <choice>
    <choice value="graphfruit"> Graphfruit <choice>
    <choice value="pitaya"> Pitaya <choice>
<choices>