over the past 3-4 days I have looked in to Angular js. From the look of it (with tutorials & videos) it looks pretty intuitive to use.But when I actually began to replace my current web app code with Angular js I faced lot of issues to startup.
For example if on a certain event I want some HTML to be added to an already present element somewhere in the DOM then by traditional jQuery route i'll simply get the element and add HTML. I can not fathom how to do the exact same thing with Angular because DOM manipulation is just not advised in Angular controller.So how do I access the element that I am supposed to expand.
Another example could be when I have to reset a Form element at some point. Again I face the dilemma of using jQuery style element selector inside Angular controller.
Could somebody please explain it to me how to do all these things with Angular.
Let me answer your title question first off: don't.
AngularJS is a powerful tool (and I'm only scratching it's surface, having worked exclusively on angular for 2 months @ work, now) but it is far too opinionated for it to be a good choice for scripting. It has a bit of a learning curve (not too steep, but certainly more so than the "hey, {{model}} is magic!" intro you find on their page. Don't take me wrong - I absolutely love it, it is extremely structured, which forces me to be organized, and makes the code extremely scalable. So, if you are willing to learn its "MO", you'll love it once you do.
Now, on DOM manipulation: you can go about it in numerous ways, but basically, if you want DOM manipulation, you want a directive. The tutorials are good to help you on this, but if you are moderately good at JS, I advise you to explore the source code (ngRepeat, which you may already know, is a straight up regular directive, exactly like one you could create). An angular scope is tied to a DOM element, and vice versa. In a directive, you can address the element it is tied to, and there use jQuery (or any other framework, or just plain JS) to change it. A change can be tied to the moment the element appears, to the changing of a model (via the $watch function), or to an event you specify (and trigger) yourself (see $broadcast ad $emit).
I changed an example script that tackled a different kind of problem (namely triggering events on the end of a ngRepeat) to include a bit of different ways of dealing with DOM: http://plnkr.co/edit/or5mys
In Angular, all the DOM manipulation code resides in directives. So if you need to add HTML to an already present element, for example loading the content of a modal dialog from a remote url, you will need to write a directive for that. See the documentation here: Directives in AngularJS
It depends on what type of DOM manipulation you want to do; as others have said, a Directive could work, but that's more for complex DOM stuff or repeatable widgets. For regular form stuf, if it's simply filling in text somewhere you can just do that with the contoller's scope.
For example if you want to update a status message, instead of directly updating the DOM, you can bind it to a field on your scope:
<div>{{statusMsg}}</div>
and in your controller, when appropriate:
scope.statusMsg = 'Done loading';
Since Angular has two-way data binding, the DOM will automatically get updated with the message.
For the example of a form reset, your form would be bound to a model, so to reset the form you would just reset the model. Here is a very simple example: http://jsfiddle.net/Kbsqx/