title: Beginner questions with AngularJS and directives - wrapping a jQuery component
body: <p>First, I should mention I am just working on transitioning to clientside programming. I am very new to js. My previous experience is primarily in C and some assembly. I also did a bit of very simple php years ago when it was still 4.0. So in short, new to javascript but putting my head around it a bit.</p>
  
  <p>I have done quite a bit of searching and lurking but have not been able to rectify my issues.</p>
  
  <p>I am figuring out some of the basics of AngularJS and it is quite nice, but I am having difficulty wrapping my head around how directives work and how to access data from custom controls.</p>
  
  <p>Long story short I am trying to make a custom control for bootstrap work with angularjs so I can use it in forms properly.</p>
  
  <p>Here is the control: <a href="http://tarruda.github.com/bootstrap-datetimepicker/" rel="nofollow">http://tarruda.github.com/bootstrap-datetimepicker/</a></p>
  
  <p>I have some other controls that I want to make work but I figure if I can get this one going I can probably get the others easily enough.</p>
  
  <p>Here is a link to a basic framework what I have at this point: <a href="http://jsfiddle.net/uwC9k/6/" rel="nofollow">http://jsfiddle.net/uwC9k/6/</a></p>
  
  <p>First off, I am trying to wrap my head around how to initialize the control once I have the template working (Which, I pretty much do at this point I think)</p>
  
  <pre><code>link: function(scope, element, attr) {
              attr.$observe('dpid', function(value) {
                  if(value) {
                $('#' + scope.dpid).datetimepicker({
                    language: 'en',
                    pick12HourFormat: true
              });
  }
  </code></pre>
  
  <p>When I put that in the link directive, it does nothing. I don't even see any errors. scope.dpid is indeed showing the ID of the control so I thought it would work. But alas, my febble understanding of javascript tells me that I am outside of the scope or some such nonsense where I cannot access the element.</p>
  
  <p>Once I get that going, I am not exactly sure how to make this data accessible in forms either.</p>
  
  <p>Any help is greatly appreciated.</p>
  
  <p><strong>Update</strong>
  Got the basic bit working, now I need to know how to get the data from the new control into my controller. Here is a link to the new jsfiddle updated.
  <a href="http://jsfiddle.net/tmZDY/1/" rel="nofollow">http://jsfiddle.net/tmZDY/1/</a></p>
  
  <p><strong>Update 2</strong>
  I think I have an idea on how to make this data accessible but my lacking knowledge of javascript has left me dry again.</p>
  
  <p>when I create the object I do it thusly.</p>
  
  <pre><code>var elDatepicker = element.datetimepicker({
  language : 'en',
  pick12HourFormat : true,
  });
  </code></pre>
  
  <p>However, when I try to use this object it does not seem to be getting the correct one, or I am just missing some basic knowledge. Either way this is sure making me feel foolish.</p>
  
  <pre><code>console.log(elDatepicker.getDate());
  </code></pre>
  
  <p>This fails, getDate is indeed a method, at least it looks like it is in the code of the plugin.</p>