Dynamically Turn Off and On URL formatting

In AngularJS you can dynamically add class formatting to elements using the ng-class attribute. I want to dynamically change whether some text is displayed as plain text or link a hyperlink.

I am also using bootstrap but <a> isn't defined as a class like h1 - h5 are.

For example, for <h1> I can just do this in AngularJS:

<div ng-class="'h1'">This will be displayed as a heading 1.</div>

But this didn't work to display as a url:

<div ng-class="'a'">This will be displayed as text, but I want it to be a URL.</div>

So after the answer from Asiel Leal Celdeiro I just had to add the working code here:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>AngularJS Example</title>

    <!-- JQuery for Bootstrap -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- AngularJS -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>


</head>
<body ng-app="myApp">

<div ng-controller="MyCtrl">
    <p ng-class="{'btn btn-link': isURL}">This can be plain text or formated like a URL.</p>
    <br>
    <label>
        <input type="checkbox" ng-model="isURL">
        Make it look like a link
    </label><br>
</div>

<script>
    var app = angular.module('myApp',[]);
    app.controller('MyCtrl', ['$scope', function($scope) {
        $scope.isURL= false;
    }]);

</script>
</body>
</html>

Solution

EDITED If you really need it to be a div you can use:

<!--myController: angular controller on this partial view-->
<!--isURL: indicate whether this text is a URL or not-->

<div ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</div>

or if you can put an a or a button you can use:

<a ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</a>

<button ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</button>

All of them will be displayed as a URL if the myController.isURL expression is true when it's evaluated in by angular and as plain text if not. It basically, puts the classes btn and btn-link if the expression is true.