fix(dropdown): selecting initial value

Resolves issue where dropdown initial value not set when bound to a model.

Closes #230.

src/components/dropdown/demo/index.html

@@ -24,28 +24,19 @@ <h2>Basic usage</h2>
     <p>
         This markup: <br />
         <pre>
-        &lt;uif-dropdown ng-model=&quot;dropdownValue&quot; &gt;
-            &lt;uif-dropdown-option value=&quot;value1&quot;&gt;Value 1&lt;/uif-dropdown-option&gt;
-            &lt;uif-dropdown-option value=&quot;value2&quot;&gt;Value 2&lt;/uif-dropdown-option&gt;
-            &lt;uif-dropdown-option value=&quot;value3&quot;&gt;Value 3&lt;/uif-dropdown-option&gt;
-            &lt;uif-dropdown-option value=&quot;value4&quot;&gt;Value 4&lt;/uif-dropdown-option&gt;
+        &lt;uif-dropdown ng-model=&quot;value&quot;&gt;
+            &lt;uif-dropdown-option value="{{key}<!---->}" ng-repeat="(key, value) in values" title="{{value}<!---->}"&gt;{{value}<!---->}&lt;/uif-dropdown-option&gt;
         &lt;/uif-dropdown&gt;
         </pre>
     </p>
 
-    <p>
+    <p ng-controller="demoController">
         Renders this:
         <br />
-        <uif-dropdown ng-model="dropdownValue">
-            <uif-dropdown-option value="value1">Value 1</uif-dropdown-option>
-            <uif-dropdown-option value="value2">Value 2</uif-dropdown-option>
-            <uif-dropdown-option value="value3">Value 3</uif-dropdown-option>
-            <uif-dropdown-option value="value4">Value 4</uif-dropdown-option>
+        <uif-dropdown ng-model="value">
+            <uif-dropdown-option value="{{key}}" ng-repeat="(key, value) in values" title="{{value}}">{{value}}</uif-dropdown-option>
         </uif-dropdown>
-
-    </p>
-    <p>
-        <span>dropdownValue: {{dropdownValue}}</span>
+        Value: {{value}}
     </p>
 
 

src/components/dropdown/demo/index.js

@@ -4,3 +4,14 @@ var demoApp = angular.module('demoApp', [
   'officeuifabric.core',
   'officeuifabric.components.dropdown'
 ]);
+
+demoApp.controller('demoController', [
+    '$scope', demoController]);
+
+function demoController($scope) {
+    $scope.values = {
+      'round': 'Round',
+      'square': 'Square'
+    };
+    $scope.value = 'round';
+};

src/components/dropdown/dropdownDirective.spec.ts

@@ -148,4 +148,25 @@
         dropdown.click();
         expect(div.hasClass('is-open')).toBe(false, 'Should be closed as the dropdown is disabled again');
     }));
+    it('should be able to pre-select an option', inject(($compile: Function, $rootScope: ng.IRootScopeService) => {
+        let $scope: any = $rootScope.$new();
+        $scope.options = [
+            { text: 'Option 1', value: 'Option1'},
+            { text: 'Option 2', value: 'Option2'},
+            { text: 'Option 3', value: 'Option3'},
+            { text: 'Option 4', value: 'Option4'}
+        ];
+        $scope.selectedValue = 'Option2';
+
+        let dropdown: JQuery = $compile('<uif-dropdown ng-model="selectedValue">' +
+            '<uif-dropdown-option ng-repeat="option in options" value="{{option.value}}"\
+              title="{{option.text}}">{{option.text}}</uif-dropdown-option>' +
+            '</uif-dropdown>')($scope);
+        $scope.$digest();
+        dropdown = jQuery(dropdown[0]);
+        dropdown.appendTo(document.body);
+
+        let title: JQuery = dropdown.find('span.ms-Dropdown-title');
+        expect(title.text()).toBe('Option 2', 'Displayed text should be Option 2');
+    }));
 });

src/components/dropdown/dropdownDirective.ts

@@ -72,6 +72,10 @@ export class DropdownOptionDirective implements ng.IDirective {
                     dropdownController.setViewValue(instanceElement.find('span').html(), attrs.value, ev);
                 });
             });
+        let value: string = dropdownController.getViewValue();
+        if (value && value === attrs.value) {
+            dropdownController.setViewValue(attrs.title, attrs.value, null);
+        }
     }
 }