# AngularJS Gantt Chart | DayPilot Pro for JavaScript Demo

> Read more about the [AngularJS Gantt Chart](https://doc.daypilot.org/gantt/angularjs/).

## Links

- Canonical HTML: /demo/gantt/angularjs.html
- Source HTML folder: /demo/gantt/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function ($scope) {

            //$scope.config = {};

            $scope.config = {
                scale: "Day",
                startDate: "2014-09-01",
                days: 30,
                timeHeaders: [
                    {groupBy: "Month"},
                    {groupBy: "Day", format: "d"}
                ],
                tasks: [
                    {
                        start: new DayPilot.Date("2014-09-05T00:00:00"),
                        end: new DayPilot.Date("2014-09-06T00:00:00"),
                        id: DayPilot.guid(),
                        text: "One-Day Task"
                    }
                ]
            };

            $scope.add = function () {
                $scope.config.tasks.push(
                    {
                        start: new DayPilot.Date("2014-09-05T00:00:00"),
                        end: new DayPilot.Date("2014-09-06T00:00:00"),
                        id: DayPilot.guid(),
                        text: "One-Day Task"
                    }
                );
            };

            $scope.move = function () {
                var task = $scope.config.tasks[0];
                task.start = task.start.addDays(1);
                task.end = task.end.addDays(1);
            };

            $scope.rename = function () {
                $scope.config.tasks[0].text = "New name";
            };

            $scope.message = function () {
                $scope.dp.message("Hi");
                //console.log($scope.dp);
            };

        });
```