Samantha Smith, Greetings! I noticed a few typos in your code, such as unclosed div tags and missing semicolons. I also made some adjustments to the CSS styles.
Feel free to check out this operational Plunkr to see if it aligns with your desired functionality, particularly regarding the red/blue divisions within the modal.
Referencing the code in your Plunkr, which differs slightly from what you have displayed above.
my-modal.html
<div class="modal-body">
<div class="part1" ng-show="active === 'part1'">
<p>I am part 1</p>
</div>
<div class="part2" ng-show="active === 'part2'="active === 'part2'" >
<p>I am part 2</p>
</div>
</div>
style css
.part1 {
background-color: blue;
height: 200px;
-webkit-animation-name: part1;
-webkit-animation-duration: 4s;
animation-name: part1;
animation-duration: 4s;
}
@-webkit-keyframes part1 {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes part1 {
from {opacity: 0;}
to {opacity: 1;}
}
.part2 {
background-color: red;
height: 200px;
-webkit-animation-name: part2;
-webkit-animation-duration: 4s;
animation-name: part2;
animation-duration: 4s;
}
@-webkit-keyframes part2 {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes part2 {
from {opacity: 0;}
to {opacity: 1;}
}
app.js
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $modal) {
$scope.name = 'World';
$scope.open = function() {
$modal.open({
templateUrl: 'my-modal.html',
controller: 'Controller1'
});
}
});
app.controller('Controller1', function($timeout, $scope) {
$scope.active = 'part2';
$timeout(function() {
$scope.active = 'part1';
}, 3000);
$timeout(function() {
$scope.active = 'part1';
}, 3000);
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@*" data-server="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbeb1b8aab3beadf1b5ac9feef1ecf1a7">[email protected]</a>" src="https://code.angularjs.org/1.3.16/angular.js" data-semver="1.3.16"></script>
<script data-require="ui-bootstrap@*" data-server="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b110a0e1e09023b49554a5548">[email protected]</a>" data-server="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap@*" data-server="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<button ng-click="open()">Open me</button>
</body>
</html>