Uncaught referenceerror is not defined - adding javascript function when Angular is being used

Question

I am familiar with Javascript and Jquery, but fairly new to angular. I have used jquery in the past with angular, but this application that I inherited is causing my severe grief.

I click on button and get:

Uncaught ReferenceError: addComment is not defined

Code:

    <div ng-controller="TipsCtrl" class="container" id="tips">

    <div class="grid" style="margin-bottom: 0" >
    <div class="col-1-4">
    </div>
    <div style="text-align: center" class="col-1-2">
      <label class="text-blue text-center">Sort By:</label>
      <select style="width:30%" ng-init="order='created'" class="input" ng-model="order">
        <option value="created">Date Created</option>
        <option value="createdBy">Created By</option>
        <option value="getCategory()">Category</option>
      </select>
      <button data-tooltip="Reverse the sorting order."
        class="btn-blue" ng-click="reverse=!reverse">Reverse</button>
    </div>
    <div class="col-1-4 text-right">
      <button ng-click="createEmptyTip()" style="vertical-align: bottom" class="btn-blue">Add</button>
    </div>
    </div>
    <div class="col-1-1" ng-if="!!error">
    <div class="panel">
      <span class="text-red">Error:</span> {{ error }}
    </div>
     </div>
       <div update="resultsUpdated" paginate="page in tips" order="order" reverse="reverse" url="true">
     <div style="margin-bottom: 20px">
     <div paginate-controller></div>
    </div>
    <div ng-repeat="tip in page" class="tip"
    id="tip-{{ tip.id }}" async-anchor async-anchor-delay="500">
       <div class="grid">
         <div class="col-1-2">
        <h3>
           <span class="text-red" ng-if="tip.isNew()"><b>New:</b></span>
          {{ tip.title }}
          <div>Category: {{ tip.getCategory() }}</div>
        </h3>
      </div>
      <div class="col-1-2 text-right">
        <span>Posted by</span>
        <span class="text-blue">{{ tip.createdBy }}</span>
        <span>on {{ tip.created | date:'shortDate' }}</span>
        <span>{{ tip.created | date:'H:mm' }}</span>
      </div>
      <div class="col-1-1">
        <pre>{{ tip.body }}</pre>
      </div>
      <div class="col-3-4">
        <ul ng-if="tip.attachments.length > 0" class="attachment-list">
          <li ng-repeat="attachment in tip.attachments">
            <a href="{{ attachment.getDownloadLink() }}">{{ attachment.name }}</a>
          </li>
        </ul>
        <div class="col-1-1">
        </div>
        <div class="col-1-1">
            <a href="#/tips/comments/{{ tip.id }}?paginatePage={{ params.paginatePage }}" class="btn-yellow">Angular Add Comment</a>
            <button onclick="addComment();" id="addcomment/{{tip.id}}" class="btn-yellow">Add Comment</button>
        </div>
        </div>
        <!---->
      <div class="col-1-4 text-right" ng-if="tip.createdBy == user.ntid">
        <a href="#/tips/edit/{{ tip.id }}?paginatePage={{ params.paginatePage }}" class="btn-yellow" >Edit</a>
        <!--<a href="#/tips/delete/{{ tip.id }}" class="btn-red">Delete</a>0-->
        <button ng-ask="deleteTip(tip)" title="Delete"></button>
      </div>
    </div>
  </div>
   <div style="margin-top: 20px">
    <div paginate-controller></div>
   </div>
   </div>
   </div>

I call in the code the addComment() function ( I tried jquery first )

<script>
    function addComment() {
        console.log('in');
    }
</script>

Answer 1

Try moving the function out of the markup and into the controller...

...inside TipsCtrl...
$scope.addComment = function() {
    console.log('in');
};