title: AngularJS: Using an angucomplete and data isn't always populated correctly on load
body: <p>I am writing some forms for adding and editing resources. I am using Angucomplete-alt (<a href="https://github.com/ghiden/angucomplete-alt" rel="nofollow">https://github.com/ghiden/angucomplete-alt</a>) and my own dropdown directive to get choices from the database. Those are in a separate controller from the main form. My regular text fields populate fine on the edit form, but I have issues with the  Angucomplete and selects. The scope data is there on page load. I have written a function to grab it using the ID in the URL. But they don't always populate unless you reload the page. How can I get them to populate EVERY time?</p>
  
  <p>Here is my function to populate the form: </p>
  
  <pre><code> $scope.popForm = function(clientId) {
          var config = {
              params: {clientId: $stateParams.clientId},
              headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          };
          $http.get('assets/php/clients/pop_client.php', config)
              .then(function(data) {
                      var realStatus = data.data.status;
                      if(realStatus == 'success'){
  
                          //Set the $scope from the JSON response
                          $scope.client = data.data.client;
  
  
                          //Broadcast a bunch of events with data to the dropdowns
                          $timeout(function() { 
                              $rootScope.$broadcast('setTypeDropdown', data.data.client.type);
                              $rootScope.$broadcast('setCatDropdown', data.data.client.category);
                              $rootScope.$broadcast('setTeamDropdown', data.data.client.team);
                              $rootScope.$broadcast('setA1Dropdown', $scope.client.assigned1);
                              $rootScope.$broadcast('setA2Dropdown', $scope.client.assigned2);
                          });
                      }
          });
  };
  </code></pre>
  
  <p>I have another controller that takes care of the selects, so that's why there are broadcasts of the data down to their isolated scopes. Here is one of the $on functions, since they are all basically the same. (There MUST be a less convoluted way of doing this...)</p>
  
  <pre><code>// Options are the select options that I get from the database 
  // for each instance of the select controller
  
  $scope.$on('setTypeDropdown', function(event, type) {
                      var i = 0;
                      $.each($scope.options, function(){
                          if (this.value == type){ 
                                  $scope.client.type = $scope.options[i];
                          }
                          i++;
                      });
  });
  </code></pre>
  
  <p>So, IS there a better way of doing this? Because this doesn't quite work...</p>
  
  <p><strong>EDIT:</strong> Angucomplete-alts are working well now. Just my convoluted selects to worry about. Wonder if it wouldn't be better to de-Angularize them and not use my directive.</p>