Nested ng-click argument undefined

Question

I am using a Dynamic list created using ng repeat. Each item has a ng-click on it . But few items are conditioned which makes a form appear and the form submit again have a ng click on it. Here is my HTML.

<div>
  <div class="dropdown">
    <span class="dropdown-toggle"  data-toggle="dropdown">Services
    <span class="caret"></span></span>
    <ul class="dropdown-menu list-group">
      <li>
          <div class="input-group"> 
         <input type="text" placeholder="Search" ng-model='dfilter.Name' class="form-control">
      </div>   
      </li>
      <li class="divider"></li>
      <li class= "service_list_li" ng-repeat="d in services | filter:dfilter"  ng-click="hitDrupal(d.Name,d.endpoint,d.api)">{{ d.Name }}</li>
    </ul>
 </div>
 <div>
   <form name="dynamic_fields">
     <input type="text" ng-model="drupDynam.one"  ng-if="drupal_dynamic1">
     <input type="text" ng-model="drupDynam.two"  ng-if="drupal_dynamic2" >
     <input type="submit" ng-disabled="dynamic_fields.$pending" ng-click="goDynamic(drupDynam)"  value="Go!" ng-show="drupal_dynamic1">
   </form>
 </div>
</div>

And here is the JS:

 $scope.hitDrupal = function(Name,endpoint,api)
{
  $scope.drupal_dynamic1 = false;
  $scope.drupal_dynamic2 = false;
  if (endpoint=='login') {
     //Do something
  }
  else if (Name == 'New') {
       $scope.drupal_dynamic1 = true;
       $scope.goDynamic = function(drupDynam)
       {
          dynamic_api = api + '/' + drupDynam.one;
          console.log(dynamic_api);
          //Do Something
       }
  }
else
{
 //Do Something 
}
}

So the Issue is i am getting the all arguments for the hitDrupal function. i.e Name,endpoint and api. But getting an undefined for second ngclick argument i.e drupDynam.

I have tried passing individual variables also instead of the comlete object. I have used ng-submit on the form instead of ng-click. But no help.

Answer 1

Since you have drupDynam in the template, it should be on scope. So you don't need to pass it as an argument. I would say, that the following should work if drupDynam.one and drupDynam.two work in the template properly:

$scope.goDynamic = function() {
   dynamic_api = api + '/' + $scope.drupDynam.one;
   console.log(dynamic_api);
}

If no, then something's not ok with drupDynam initialization. You may try to output it right in the template:

<input type="submit" ng-disabled="dynamic_fields.$pending" ng-click="goDynamic(drupDynam)"  value="Go!" ng-show="drupal_dynamic1">
drupDynam: {{drupDynam}} drupDynam.one: {{drupDynam.one}}

By the two-way binding the view must be changed immediately after the value of drupDynam is changed on scope, so you'll be able to see it before the click. And if it's not good, you need to investigate the drupDynam assignments in code. Where do you set its value?