Question: I have the following code:

```
<input id="id">
<button data-action="bea" ng-click="Create($('#id1')[0].value);" class="btn">Insert ID</button>
<button data-action="bea" ng-click="Create($('#id2')[0].value);" class="btn">Insert ID</button>

```

In the JS I have:

```
$scope.Create = function (id){
        if (id === undefined) {
            $scope.data = "You must specify an id";
        } else {
                $scope.data = data;
                console.log(data);
            });
        }
    };

```

When the call gets into the Create function the value of the id is undefined.

If I add the following line at the beginging of the Create function everything works ok:

```
id = $('#id')[0].value;

```

If I send a constant value it works:

```
<button data-action="bea" ng-click="Create('SomeID');" class="btn">Insert ID</button>

```

Why is this happening and how can I do that without putting the line of value into the method?

Thanks

Answer: 
This is just an extension of comments and other answers, You could achieve this in many ways using angular, one simple example could be:-

```
  <!-- Add a controller -->
  <div ng-controller="MainCtrl"> 
     <!-- Give a model binding to your text input -->
     <input ng-model="userEntry" type="text"/> 
     <!-- ng-click pass which ever argument you need to pass, provided it is an expression that can be evaluated against the scope or any constants -->
     <button data-action="bea" ng-click="Create(userEntry);" class="btn">Insert ID</button>
    <!-- Some simple data binding using interpolation -->
    {{data}}
     <!-- Just for demo on repeater on a list of items on the scope -->
     <div ng-repeat="item in items track by $index">{{item}}</div>
  </div>

```

**[Example Demo](http://plnkr.co/edit/IemE00?p=preview)**

My 2 cents on the lines of what were originally trying to do:-

Use angular bindings instead of accessing DOM directly for getting the data, it really helps you deal with just the data without worrying about how to access or render it in DOM. If you think you need to access DOM for implementing business logic re-think on the design, if you really need to do it, do it in a directive. Angular is very opinionated on the design and when where you do DOM access.

* [ng-model](https://docs.angularjs.org/api/ng/directive/ngModel)
* [ng-binding](https://docs.angularjs.org/api/ng/directive/ngBind)
* [controller](https://docs.angularjs.org/api/ng/directive/ngController)
* [all about ngmodel controller](https://docs.angularjs.org/api/ng/type/ngModel.NgModelController)
This is not the way you should do in AngularJS. You should really think in Angular if you want to use AngularJS. Refer this post (["Thinking in AngularJS" if I have a jQuery background?](https://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background))

All DOM manipulation should be done in Directive. Refer this page that I found really clear. 
(<http://ng-learn.org/2014/01/Dom-Manipulations/>)