title: Select an option in dropdown using a directive in angularjs
body: <p>I am new to angularjs and working to directive for a dropdown but having problem to select initial value. I have to pass the Id of the option to select as an attribute to the directive. I am setting the attribute value in a scope variable which I then use in ng-Init. </p>
  
  <p>Here is my directive code:</p>
  
  <pre><code>export class ChoiceGroup
      {
          constructor ()
          {
              var directive: ng.IDirective = {};
              directive.restrict = "E";
              directive.replace = true;
              directive.template = '&lt;div&gt;&lt;select name="cmbCG" ng-model="dataSel" ng-options="c.DisplayName for c in data"&gt;&lt;/select&gt;&lt;/div&gt;';
              directive.link = function ($scope: any, element: JQuery, attributes: any) {
                  var injector = angular.element(document).injector();
                  var key = attributes.key;
  
                  var cgCacheService: ChoiceGroupsCacheService;
                  seCGCacheService = injector.get('seChoiceGroupsCacheService');
  
                  var values: Array&lt;ChoiceValue&gt;;
                  values = seCGCacheService.GetChoiceValues(key);
  
                  $scope.data = values;
                  if (attributes.selectedvalue) {
                      $scope.selectedvalue = values[attributes.selectedvalue];
                  }
              }
  
              return directive;
          }
  </code></pre>
  
  <p>The code is in Typescript. Here is HTML:</p>
  
  <pre><code>&lt;choicegroupcombo key="RecurrenceFrequency" selectedvalue="3"&gt;&lt;/choicegroupcombo&gt;
  </code></pre>
  
  <p>If I hardcode the value of dataSel ie ng-init="dataSel=3" then it works fine but when I set to scope variable then it does not work. So how can I fix the issue.</p>
  
  <p><strong>EDIT</strong>
  Solved. I have updated the code accordingly.</p>