title: Making behavior of hyperlinks conditional in AngularJS
body: <p>In an Angular app, I have a list of hyperlinks that need to have the following behavior:</p>
  
  <ul>
  <li><p>if a certain condition is present (e.g. if a certain cookie has value x), a click on the hyperlink should open a modal window;</p></li>
  <li><p>if this condition is not met (e.g. if the cookie has value y), the hyperlink should act in its usual manner and open the link in a new tab.</p></li>
  </ul>
  
  <p>The hyperlinks are formatted as follows:</p>
  
  <pre><code>&lt;a ng-href="{{article.url}}" target="_blank" ng-click="myFunction()"&gt;
    {{article.title}}
  &lt;/a&gt;
  </code></pre>
  
  <p>I am puzzled by how to implement such a behavior. If I leave both <code>ng-href</code> and <code>ngclick</code> directives, then <code>ng-href</code> will insert the url and every click will open a page in a new tab. If I remove the <code>ng-href</code> directive, then the only way to open a link in another tab will be through javascript, but this is prevented by most browsers. I couldn't think of a way to make <code>ng-href</code> conditional (for example, writing <code>&lt;a ng-href="myCondition === true ? {{article.url}} : '#'"&gt;</code> doesn't work). </p>
  
  <p>Could you please suggest a way of how to implement such a functionality in Angular?</p>