<div ng-controller="MyController">
    <!-- Displaying a variable value using curly braces -->
    <p>{{myVariable}}</p>

    <!-- Displaying a variable value using ng-bind -->
    <p ng-bind="myVariable"></p>

    <!-- Defining the variable in the controller -->
    <script>
        var app = angular.module('myApp', []);
        app.controller('MyController', function($scope) {
            $scope.myVariable = 'Hello World';
            $scope.myFunction = function() {
                return 'Hello World';
            };
            $scope.showElement = true;
            $scope.itemList = ['Item 1', 'Item 2', 'Item 3'];
        });
    </script>

    <!-- Calling a function using curly braces -->
    <p>{{myFunction()}}</p>

    <!-- Calling a function using ng-bind -->
    <p ng-bind="myFunction()"></p>

    <!-- Conditional rendering -->
    <div ng-if="showElement">
        <p>This element will be displayed if showElement is true.</p>
    </div>

    <!-- Iterating over a list using curly braces -->
    <ul>
        <li ng-repeat="item in itemList">{{item}}</li>
    </ul>

    <!-- Iterating over a list using ng-bind -->
    <ul>
        <li ng-repeat="item in itemList" ng-bind="item"></li>
    </ul>
</div>