How to create a tooltip for angular option using ng-options
<p>I would like to use uib-popover to create a popup/tooltip for an option item generated by ng-options for a select box. I have tried two approaches but neither one is quite good enough. Ng-options works well because I have to have a default item selected, but I cannot figure out how to plug in uib-popover. If I use ng-repeat I feel like I have more control over how each option is generated, but I can't figure how to select a defualt item for that scenario. Here is the code I am using for the ng-repeat method:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
 "use strict";

 var selectionTestViewModel = function() {

  var vm = this;

  vm.options = [
   { id: 1, val: "Option 1", desc: "Description of Option 1" },
   { id: 2, val: "Option 2", desc: "Description of Option 2" }
  ];

  vm.selectedOption = vm.options[0];

 };

 angular.module("angularApp").controller("selectionTestController", [selectionTestViewModel]);

}());</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="page-content" ng-controller="selectionTestController as st"&gt;
 &lt;h2&gt;Selection Test&lt;/h2&gt;
 &lt;div&gt;
  &lt;select ng-model="st.selectedOption"&gt;
   &lt;option ng-repeat="op in st.options track by op.id" value="{{op.id}}" title="{{op.desc}}"&gt;{{op.val}}&lt;/option&gt;
  &lt;/select&gt;
  &lt;div&gt;
   &lt;span&gt;Selected Value: {{st.selectedOption}}&lt;/span&gt;
  &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>